html - 如何解决 Bootstrap 中的嵌套列

Question

我正在尝试使用 Bootstrap 构建页面结构，但遇到了几个问题。

我有一个左容器，其中包含一些列，而右容器则包含一些其他列。

我遇到的问题是左侧容器中横跨页面的 4 个小框有边距将它们向左和向右推。 4 个盒子需要与另一个顶部面板对齐。

此外，当我更改屏幕宽度时，4 个框不会保持为 4 个，它们会推出巨大的， 有什么好方法可以让他们的 react 不那么咄咄逼人吗？

请看我的fiddle attached

        <div class="col-lg-3 col-md-6 hero-feature">
        <div class="thumbnail">
            <img src="http://placehold.it/800x500" alt="">
            <div class="caption">
                <h3>Feature Label</h3>
                <p>This would be a great spot to feature some brand new products!</p>
                <p><a href="#" class="btn btn-primary">Buy Now!</a>  <a href="#" class="btn btn-default">More Info</a>
                </p>
            </div>
        </div>
    </div>

Answer 1

您的四个嵌套列比上面的面板缩进得更多的原因是您没有将嵌套列包装在 div.row 类中。

Updated jsFiddle here .

你的问题的第二部分与你使用的关于 BS3 的类有关。我会尝试以下操作，看看它是否会产生更好的响应:

<div class="col-lg-3 col-sm-6 hero-feature">
  <div class="thumbnail">
    <img src="http://placehold.it/800x500" alt="">
    <div class="caption">
      <h3>Feature Label</h3>
      <p>This would be a great spot to feature some brand new products!</p>
      <p><a href="#" class="btn btn-primary">Buy Now!</a>  <a href="#" class="btn btn-default">More Info</a></p>
    </div> <!-- /.caption -->
  </div> <!-- /.thumbnail -->
</div> <!-- /.col-lg-3.col-sm-6.hero-feature or nested column -->

请注意类从 .col-md-6 更改为 .col-sm-6。

此外，如果您不希望主容器包装得那么快，请尝试将 .col-lg-10 替换为 .col-md-10 或 .col-sm-10。同时更新侧边栏，将 .col-lg-2 替换为 .col-md-10 或 .col-sm-10，以两者为准大小由您决定。

jsFiddle for different container sizes .