css - Center a 7 column layout in Bootstrap3?

Question

I'm starting to use Bootstrap 3 and chose a 12 column grid. I'd like my content to be 7 column large on large screens. Is there any way to set a 0.5 offscreen on the left?

Thanks for your help

Answer 1

您可以使用经过验证的边距使任何列大小居中：0 auto; 技术，您只需要注意 Bootstrap 的网格系统添加的浮动。我建议定义一个自定义 CSS 类，如下所示：

.col-centered{
    float: none;
    margin: 0 auto;
}

现在您可以将它添加到任何屏幕大小的任何列大小，并且它将与 Bootstrap 的响应式布局无缝协作：

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

Answer 2

你可以只使用col-lg-pull-xand col-lg-push-x。

对于半列，您可以尝试创建一个新类。假设您希望可以设置和col-lg-7-5的平均值。col-lg-7col-lg-8

Answer 3

如果您只想坚持使用 Bootstraps 网格系统，您可以将您的七列包装在一个 div 中并使用“col-md-offset”类。例如：

<div class="container-fluid">
  <div class="row text-center">
    <h1>CENTERED TEXT</h1>
  </div>
  <div class="row">
    <div class="col-md-10 col-md-offset-3">
      <div class="col-md-1 text-center">
        <p>COLUMN ONE</p>
      </div>
      <div class="col-md-1 text-center">
        <p>COLUMN TWO</p>
      </div>
      <div class="col-md-1 text-center">
        <p>COLUMN THREE</p>
      </div>
      <div class="col-md-1 text-center">
        <p>COLUMN FOUR</p>
      </div>
      <div class="col-md-1 text-center">
        <p>COLUMN FIVE</p>
      </div>
      <div class="col-md-1 text-center">
        <p>COLUMN SIX</p>
      </div>
      <div class="col-md-1 text-center">
        <p>COLUMN SEVEN</p>
      </div>
    </div>
  </div>  
</div>

缺点是您的列大小限制为 10。或者，您可以添加一些内联样式来填充屏幕的整个宽度，如下所示：

  <div class="row text-center">
    <h1>CENTERED TEXT</h1>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
        <p>COLUMN ONE</p>
      </div>
      <div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
        <p>COLUMN TWO</p>
      </div>
      <div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
        <p>COLUMN THREE</p>
      </div>
      <div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
        <p>COLUMN FOUR</p>
      </div>
      <div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
        <p>COLUMN FIVE</p>
      </div>
      <div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
        <p>COLUMN SIX</p>
      </div>
      <div class="col-md-1 text-center" style="margin-left: 3%;">
        <p>COLUMN SEVEN</p>
      </div>
    </div>
  </div>

代码笔在这里：https ://codepen.io/dylanprem/pen/BrzKxo?editors=1010

希望这可以帮助！