引导网格定位

Question

所以我想做一个引导网站，但我真的不知道如何自定义这些网格的宽度和位置。我是一个自我引导的初学者。你能帮帮我吗?它不必那么精确，但我需要保持布局。

它应该是什么样的:https://i.stack.imgur.com/hlwxP.png

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

From Bootstrap 3.0 release

color -vp-push-x =将列右推x列数，从列通常呈现的位置开始-> position: relative，在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>

等等。

Answer 2

如果您需要具有特定像素宽度的特定列，则不能使用Bootstrap网格。Bootstrap网格被分成12个大小相等的列。你仍然可以使用Bootstrap，只是不使用网格部分。网格系统可以做一些有限的定制，但我不认为它可以达到您想要做的。你需要使用自定义CSS来定位你想要的网站。

如果你只是想要类似的东西，而不关心确切的宽度，那么你应该遵循网格文档。你正在朝着正确的方向前进，但是当你有嵌套的列时，你需要确保你在一行中包装，而你没有。你也可以使用col-md-offset-*样式来移动列，这样你就不必"使用"所有12列了。例如，对于网站的主要部分，您可能希望第一列是"。