বুটস্ট্র্যাপ উপাদান 100% প্রস্থ

Question 1

আমি বিকল্প 100% রঙিন ব্লক তৈরি করতে চাই। একটি "আদর্শ" পরিস্থিতি সংযুক্তি হিসাবে চিত্রিত হয়, পাশাপাশি বর্তমান পরিস্থিতিও।

পছন্দসই সেটআপ:

বর্তমানে:

আমার প্রথম ধারণাটি ছিল একটি ডিভ ক্লাস তৈরি করা, এটি একটি পটভূমির রঙ দিন এবং এটি 100% প্রস্থ দিন।

.block {
    width: 100%;
    background: #fff;
}

তবে, আপনি দেখতে পাচ্ছেন যে এটি অবশ্যই কাজ করে না। এটি একটি ধারক অঞ্চলে সীমাবদ্ধ। আমি ধারকটি বন্ধ করার চেষ্টা করেছি এবং এটিও কার্যকর হয়নি।

Question 2

containerবর্গ ইচ্ছাকৃতভাবে 100% প্রস্থের নয়। ভিউপোর্টের প্রস্থের উপর নির্ভর করে এটি পৃথক স্থির প্রস্থ।

আপনি যদি পর্দার পুরো প্রস্থের সাথে কাজ করতে চান তবে ব্যবহার করুন .container-fluid:

বুটস্ট্র্যাপ 3:

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-6"></div>
      <div class="col-lg-6"></div>
    </div>
    <div class="row">
      <div class="col-lg-8"></div>
      <div class="col-lg-4"></div>
    </div>
    <div class="row">
      <div class="col-lg-12"></div>
    </div>
  </div>
</body>

বুটস্ট্র্যাপ 2:

<body>
  <div class="row">
    <div class="span6"></div>
    <div class="span6"></div>
  </div>
  <div class="row">
    <div class="span8"></div>
    <div class="span4"></div>
  </div>
  <div class="row">
    <div class="span12"></div>
  </div>
</body>

Question 3

এভাবে আপনি বুটস্ট্র্যাপ 3 এর মাধ্যমে আপনার কাঙ্ক্ষিত সেটআপটি অর্জন করতে পারেন :

<div class="container-fluid">
    <div class="row"> <!-- Give this div your desired background color -->
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    ... your content here ...
                </div>
            </div>
        </div>
    </div>
</div>

container-fluidঅংশ নিশ্চিত করুন যে আপনি পুরো প্রস্থ উপর পটভূমি পরিবর্তন করতে পারেন করে তোলে। containerঅংশ নিশ্চিত যে আপনার সামগ্রী এখনও একটি নির্দিষ্ট প্রস্থ আবৃত হয়।

এই পদ্ধতির কাজ করে তবে ব্যক্তিগতভাবে আমি সমস্ত বাসা বাঁধতে পছন্দ করি না। যাইহোক, আমি এখন পর্যন্ত এর থেকে ভাল সমাধান খুঁজে পাইনি।

Question 4

দ্রুত উত্তর

একাধিক নট .container এস এস ব্যবহার করুন
আপনি যেগুলিতে .containerএকটি পুরো-প্রস্থের পটভূমি রাখতে চান সেটি মোড়ানোdiv
মোড়ানোর ডিভিতে একটি সিএসএস পটভূমি যুক্ত করুন

ফিডলস: সাধারণ: https://jsfiddle.net/vLhc35k4/ , ধারক সীমানা: https://jsfiddle.net/vLhc35k4/1/
এইচটিএমএল:

<div class="container">
  <h2>Section 1</h2>
</div>
<div class="specialBackground">
  <div class="container">
    <h2>Section 2</h2>
  </div>
</div>

সিএসএস: .specialBackground{ background-color: gold; /*replace with own background settings*/ }

আরও তথ্য

প্রয়োজনীয় কন্টেন্টার ব্যবহার করবেন না

অনেক লোক ( ভুলভাবে ) পরামর্শ দেবেন যে আপনার নেস্টেড পাত্রে ব্যবহার করা উচিত।
ভাল, আপনি না করা উচিত ।
তারা নেস্ট করা মেন্ট নয়। ( দস্তাবেজের " ধারক " বিভাগটি দেখুন )

কিভাবে এটা কাজ করে

divএটি একটি ব্লক উপাদান, যা ডিফল্টরূপে নথির বডির সম্পূর্ণ প্রস্থে ছড়িয়ে যায় - সেখানে পূর্ণ-প্রস্থের বৈশিষ্ট্য রয়েছে। এটিতে এর সামগ্রীর উচ্চতাও রয়েছে (যদি আপনি অন্যথায় নির্দিষ্ট না করেন)।

বুটস্ট্র্যাপের পাত্রে কোনও দেহের সরাসরি শিশু হতে হবে না, সেগুলি কেবল কিছু প্যাডিং এবং সম্ভবত কিছু স্ক্রিন-প্রস্থ-পরিবর্তনশীল স্থির প্রস্থের পাত্রে।

যদি একটি বেসিক গ্রিডের .containerকিছু নির্দিষ্ট প্রস্থ থাকে তবে এটি অনুভূমিকভাবে স্বয়ংক্রিয়ভাবে কেন্দ্রীভূত হয়।
সুতরাং আপনি এটি হিসাবে রাখেন তাতে কোনও পার্থক্য নেই:

একটি শরীরের সরাসরি শিশু
কোনও মৌলিকের div সরাসরি শিশু যা কোনও দেহের প্রত্যক্ষ শিশু।

"বেসিক" দ্বারা divআমি বোঝাতে চাইছি divতার সীমানা, প্যাডিং, মাত্রা, অবস্থান বা সামগ্রীর আকারের কোনও সিএসএস নেই। সত্যই display: block;CSS এবং সম্ভবত ব্যাকগ্রাউন্ড সহ একটি HTML উপাদান
তবে অবশ্যই উল্লম্ব-জাতীয় সিএসএস স্থাপন (উচ্চতা, প্যাডিং-শীর্ষ, ...) বুটস্ট্র্যাপ গ্রিডটি ভাঙ্গা উচিত নয় :-)

বুটস্ট্র্যাপ নিজেই একই পন্থা ব্যবহার করছে

... এটি সমস্ত নিজস্ব ওয়েবসাইট এবং এর "জুম্বোট্রন" উদাহরণে:
http://getbootstrap.com/exferences/jumbotron/

Question 5

ভিডাব্লু ব্যবহার করে একটি workaround আছে। আপনি যখন নতুন তরল ধারক তৈরি করতে পারবেন না তখন কার্যকর। এটি, সর্বোত্তম 'ধারক' ডিভের ভিতরে পুরো আকারের হবে।

.row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 left: 50%;
}

এর পরে সাইডবারের সমস্যা আছে (@ টিফ্লোসৌরাসকে ধন্যবাদ), এই জেএস ফাংশনটির সাথে সমাধান করা হয়েছে, ডকুমেন্ট লোড এন্ড পুনরায় আকারে ডাকে:

function full_row_resize(){
    var body_width = $('body').width();
    $('.row-full').css('width', (body_width));
    $('.row-full').css('margin-left', ('-'+(body_width/2)+'px'));
    return false;
}

Question 6

বুটস্ট্র্যাপ 4 এ আপনি 'ডাব্লু -100' শ্রেণি (ডাব্লু প্রস্থ হিসাবে, এবং 100 হিসাবে 100%) ব্যবহার করতে পারেন

আপনি এখানে ডকুমেন্টেশন খুঁজে পেতে পারেন: https://getbootstrap.com/docs/4.0/utilities/sizing/

Question 7

আপনি যদি HTML লেআউটটি পরিবর্তন করতে না পারেন:

.full-width {
    width: 100vw;
    margin-left: -50vw;
    left: 50%;
}

<div class="container">
  <div class="row">
    <div class="col-xs-12">a</div>
    <div class="col-xs-12">b</div>
    <div class="col-xs-12 full-width">c</div>
    <div class="col-xs-12">d</div>
  </div>
</div>

ডেমো: http://www.bootply.com/tVkNyWJxA6

Question 8

পরিবর্তে

style="width:100%"

ব্যবহার করার চেষ্টা করুন

class="col-xs-12"

এটি আপনাকে 1 অক্ষর বাঁচাবে :)

Question 9

কখনও কখনও সামগ্রী ধারক বন্ধ করা সম্ভব হয় না। সমাধানটি আমরা ব্যবহার করছি কিছুটা আলাদা তবে ফায়ারফক্স স্ক্রোলবার আকারের কারণে একটি ওভারফ্লো প্রতিরোধ করে!

.full-width {
 margin-top: 15px;
 margin-bottom: 15px;
 position: relative;
 width: calc(100vw - 10px);
 margin-left: calc(-50vw + 5px);
 left: 50%;
}

এখানে একটি উদাহরণ: https://jsfiddle.net/RubbelDeKatz/wvt9253q

Question 10

দুঃখিত, আপনার সিএসএসের জন্যও জিজ্ঞাসা করা উচিত ছিল। যেমনটি হ'ল মূলত আপনাকে যা দেখতে হবে তা আপনার সিএসএসে আপনার ধারক ডিভ স্টাইল দিচ্ছে .container { width: 100%; }এবং তারপরে আবদ্ধ ডিভগুলি যতক্ষণ না আপনি তাদের নিজস্ব প্রস্থ না দেবেন এগুলি উত্তরাধিকার সূত্রে প্রাপ্ত হবে। আপনি কয়েকটি ক্লোজিং ট্যাগও হারিয়ে </center>যাচ্ছিলেন <center>এবং কমপক্ষে কোডের এই বিভাগে এটি কখনও খোলা না থাকলে বন্ধ করে দেয় । আমি নিশ্চিত ছিলাম না যে আপনি একই ডিভিতে ছবিটি আপনার সামগ্রী বা পৃথক পৃথকভাবে চেয়েছিলেন, তাই আমি দুটি উদাহরণ তৈরি করেছি। আমি img এর প্রস্থকে 100px এ পরিবর্তিত করেছি কেবল কারণ jsfiddle একটি ছোট দেখার ক্ষেত্রের প্রস্তাব দেয়। আপনি যা খুঁজছেন তা যদি তা না হয় তবে আমাকে জানান।

সামগ্রী এবং চিত্র পৃথক: http://jsfiddle.net/QvqKS/2/

একই বিভাগে সামগ্রী এবং চিত্র (img ভাসমান বাম): http://jsfiddle.net/QvqKS/3/

Question 11

আমি ভাবছি চাই কেন কেউ, "ওভাররাইড" ধারক প্রস্থ করার চেষ্টা করবে যেহেতু তার উদ্দেশ্য হল কিছু প্যাডিং সহ এটির সামগ্রী রাখা, কিন্তু আমি একই অবস্থা ছিল (যে কেন আমি আমার সমাধান শেয়ার করতে চেয়েছিলেন যদিও সেখানে থাকেন উত্তর এর )।

আমার পরিস্থিতিতে, আমি সমস্ত কনটেন্ট (সমস্ত পৃষ্ঠার) একটি ধারকের ভিতরে রেন্ডার করতে চেয়েছিলাম , সুতরাং এটি আমার _লয়আউট.এক্সটিএমএল থেকে কোডের টুকরো ছিল:

<div id="body">

    @RenderSection("featured", required: false)

    <section class="content-wrapper main-content clear-fix">
        <div class="container">
            @RenderBody()
        </div>
    </section>
</div>

আমার হোম ইনডেক্স পৃষ্ঠায়, আমার একটি পটভূমি শিরোনাম চিত্র ছিল আমি পুরো পর্দার প্রস্থ পূরণ করতে চাই , সুতরাং সমাধানটি সূচকটি এইভাবে তৈরি করা উচিত:

@section featured {
<!-- This content will be rendered outside the "container div" -->
<div class="intro-header">
    <div class="container">SOME CONTENT WITH A NICE BACKGROUND</div>
</div>
}

<!-- The content below will be rendered INSIDE the "container div" -->
<div class="content-section-b">
    <div class="container">
        <div class="row">
          MORE CONTENT
        </div>
    </div>
</div>

আমি মনে করি এটি কার্যকর করার চেষ্টা করার চেয়ে ভাল, কারণ বিভাগগুলি লেআউটে কিছু সামগ্রীকে পরিবর্তনশীলভাবে প্রতিস্থাপন করতে (বা জোর করে) দেখানোর উদ্দেশ্যে তৈরি করা হয়েছে।

Question 12

যদিও লোকেরা উল্লেখ করেছে যে আপনাকে এই ক্ষেত্রে .container- তরল ব্যবহার করতে হবে তবে আপনাকে বুটস্ট্র্যাপ থেকে প্যাডিংও সরিয়ে ফেলতে হবে।

Question 13

নিম্নলিখিত উত্তরটি কোনও পরিমাপের দ্বারা একেবারে অনুকূল নয়, তবে আমার এমন কিছু জিনিস প্রয়োজন যা এটি পাত্রে তার অবস্থানটি বজায় রাখে যদিও এটি সম্পূর্ণরূপে অভ্যন্তরীণ ডিভকে প্রসারিত করে।

https://jsfiddle.net/fah5axm5/

$(function() {
    $(window).on('load resize', ppaFullWidth);

    function ppaFullWidth() {
        var $elements = $('[data-ppa-full-width="true"]');
        $.each( $elements, function( key, item ) {
            var $el = $(this);
            var $container = $el.closest('.container');
            var margin = parseInt($container.css('margin-left'), 10);
            var padding = parseInt($container.css('padding-left'), 10)
            var offset = margin + padding;

            $el.css({
                position: "relative",
                left: -offset,
                "box-sizing": "border-box",
                width: $(window).width(),
                "padding-left": offset + "px",
                "padding-right": offset + "px"
            });
        });
    }
});

Question 14

আমি নীচে হিসাবে দুটি পৃথক 'ধারক' ডিভ ব্যবহার করব:

<div class="container">
   /* normal*/
</div>
<div class="container-fluid">
   /*full width container*/
</div>

মনে রাখবেন যে ধারক-তরল আপনার ব্রেকপয়েন্টগুলি অনুসরণ করে না এবং এটি একটি সম্পূর্ণ প্রস্থের ধারক।