Question

所以我想创建一个bootstrap网站，但我真的不知道如何自定义这些网格的宽度和位置。我是一个自助初学者。请你帮助我好吗？它不必准确如此糟糕，但我需要保持布局。

HTML：

<div style="margin-top:200px;" class="container">
  <div class="row clearfix">
    <div class="col-md-4 column">
    </div>
          <!--THIS ONE IS FOR THE MIDDLE, CENTERED AD-->
          <div class="col-md-4 column">
          </div>
    <div class="col-md-4 column">
    </div>
  </div>

  <div class="row clearfix">
    <div class="col-md-2 column">
    </div>
          <!--THIS ONE IS FOR BUTTONS STICKED TO THE POST ON THE LEFT-->
          <div class="col-md-1 column">
          </div>
          <!--THIS ONE IS FOR THE POST AND BUTTONS STICKED ON THE BOTTOM-->
          <div class="col-md-4 column">
          </div>
          <!--THIS ONE IS FOR THE SIDEBAR-->
          <div class="col-md-3 column">
          </div>
    <div class="col-md-2 column">
    </div>
  </div>
</div>

Answer 1

如果您需要具有像素特定宽度的特定列，则无法使用Bootstrap网格。 Bootstrap网格分为12个相等大小的列。你仍然可以使用Bootstrap，而不是网格部分。有一些limited customization可以通过网格系统完成，但我不认为它可以接近你想要做的事情。您需要使用自定义CSS来定位网站的方式。

如果您只想要类似的东西并且不关心确切的宽度，那么您应该遵循grid documentation。你正朝着正确的方向前进，但是当你有nested columns时，你需要确保你排成一排，这是你没有的。您还可以使用col-md-offset- *样式来移动列，这样您就不必使用＆＃34;使用＆＃34;全部12列。例如，对于网站的主要部分，您可能希望第一列为＆＃34; .col-md-3 .col-md-offset-4＆＃34;和第二个＆＃34; .col-md-3＆＃34;。

Answer 2

来自Bootstrap 3.0版本

col-vp-push-x =将列向右推x列，从列通常呈现的位置开始 - ＆gt;位置：相对，在vp或更大的视口上。

col-vp-pull-x = pull the column to the left by x number of columns, starting from where the column would normally render -> position: relative, on a vp or larger view-port.

vp = xs, sm, md, or lg

x = 1 thru 12

所以你的问题的答案是推/拉列。例如，您的广告行应如下所示：

<div class="row">

    <div class="col-sm-8 col-sm-pull-2 col-sm-push-2 advertisement">
        your center column
    </div>
</div>

等等。 See fiddle here

Bootstrap网格定位

2 个答案: