Question

   <div class="container">
  <div class="row">
    <div class="col-sm-12" style="background-color:pink;">
    <p>
    test
    </p>
    </div>
    <div class="col-sm-8 col-sm-offset-2" style="background-color:green;">
      <div class="col-sm-8" style="background-color:red;">
      <p>
      red
      </p>
      </div>
      <div class="col-sm-2" style="background-color:blue;">
      <p>
      blue
      </p>
      </div>
      <div class="col-sm-2" style="background-color:yellow;">
        <p>
        yellow
        </p>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/b7f5ob1g/1/

我创建了这个布局，但我不了解尺寸。

id =“wrapper”的外部div的col大小为8，偏离2（这意味着它被向右拉2个cols，因此右边有2个cols可用空间。

总的来说，我有8个cols的内容。

现在我理解了3个内部div，我试图调整列的大小

div1: col size 6
div2: col size 1
div3: col size 1

所以它总结为8.但是到目前为止它太小了，我必须总结到12个。

与div1：8，div2：2，div3：2一样。

我是否必须将这些嵌套的div计入12个cols，或者你可以向我解释这种情况吗？

Answer 1

在Bootstrap grid system中，所有col- *元素都必须包含在.row元素中。在每个.row内，您有12列，无论父列容器有多大/小。也就是说，你的HTML应该是这样的：

<div class="container">
  <div class="row">
    <div class="col-sm-12" style="background-color:pink;">
      <p>test</p>
    </div>
    <div class="col-sm-8 col-sm-offset-2" style="background-color:green;" id="wrapper">
      <div class="row">
        <div class="col-sm-8" style="background-color:red;">
          <p>red</p>
        </div>
        <div class="col-sm-2" style="background-color:blue;">
          <p>blue</p>
        </div>
        <div class="col-sm-2" style="background-color:yellow;">
          <p>yellow</p>
        </div>
      </div>
    </div>
  </div>
</div>

小提琴here

嵌套div大小，在引导程序中具有偏移量

1 个答案: