Bootstrap 3中的嵌套行是否不尊重网格? [英] Nested rows in Bootstrap 3 fail to respect the grid?

问题描述

一旦进入嵌套行，Bootstrap似乎会破坏其自身的网格.这是一个很好的例子:

Bootstrap seems to break its own grid once you get into nested rows. This is a good example:

div {
  border: 1px solid gray;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div>
  </div>
  <div class="row">
    <div class="col-xs-1">col</div>
    <div class="col-xs-10">
      <div class="row">
        <div class="col-xs-5">nested col-xs-5</div>
        <div class="col-xs-7">nested col-xs-7</div>
      </div>
    </div>
    <div class="col-xs-1">col</div>
  </div>
</div>

我希望能够使嵌套的xs-col- *"列与顶部的12个列完全对齐.如果我将内部类设为col-xs-3/col-xs-7(像包含col一样加起来最多10个)，它也不起作用.只是在右边留下了一个空白.

I would expect to be able to make the "nested xs-col-*" columns line up exactly with the 12 cols at the top. It also doesn't work if I make the inner classes col-xs-3/col-xs-7 (adding up to 10 like the containing col). That just leaves a gap at the right.

如果使用奇数宽度，一旦进入嵌套行，Bootstrap实际上就不会让您尊重网格，这是正确的说法吗?还是我做错了?

Is it correct to say that Bootstrap won't actually let you respect the grid once you get into nested rows if you use odd widths? Or am I doing it wrong?

在我看来，网格的整个重点是事物应该对齐.如果我想完美对齐，是否必须远离(平凡的)嵌套行?

It seems to me that whole point of a grid is that things should be aligned. Do I have to stay away from (nontrivial) nested rows if I want perfect alignment?

推荐答案

1)选择比例

嵌套行也使用12列网格.因此，您要求Bootstrap从10 parent columns中获取5/12.但这是一个小数.由于此列的边界彼此不一致.

1) Pick the proportions

Nested row also uses a 12-columns grid. So you asked Bootstrap to take 5/12 from 10 parent columns. But this is a fractional number. Because of this column boundaries do not coincide with each other.

选择列之间的比例.例如:

Pick the proportions between the columns. For example:

9 parent columns中的
• 4/12恰好是3 parent columns
8 parent columns中的
• 3/12恰好是2 parent columns

• 4/12 from 9 parent columns is exactly 3 parent columns
• 3/12 from 8 parent columns is exactly 2 parent columns

div {
  outline: 1px solid gray;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div>
  </div>
  <div class="row">
    <div class="col-xs-1">col</div>
    <div class="col-xs-1">col</div>
    <div class="col-xs-1">col</div>
    <div class="col-xs-8">
      <div class="row">
        <div class="col-xs-3">nested 4</div>
        <div class="col-xs-9">nested 8</div>
      </div>
    </div>
    <div class="col-xs-1">col</div>
  </div>
  <div class="row">
    <div class="col-xs-1">col</div>
    <div class="col-xs-1">col</div>
    <div class="col-xs-9">
      <div class="row">
        <div class="col-xs-4">nested 3</div>
        <div class="col-xs-8">nested 9</div>
      </div>
    </div>
    <div class="col-xs-1">col</div>
  </div>
</div>

您可以在没有嵌套列的情况下执行相同的操作:

You can do the same without nested columns:

div {
  outline: 1px solid gray;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div>
  </div>
  <div class="row">
    <div class="col-xs-1">col</div>
    <div class="col-xs-3">3 columns</div>
    <div class="col-xs-7">7 columns</div>
    <div class="col-xs-1">col</div>
  </div>
  <div class="row">
    <div class="col-xs-1">col</div>
    <div class="col-xs-4">4 columns</div>
    <div class="col-xs-6">6 columns</div>
    <div class="col-xs-1">col</div>
  </div>
</div>

这篇关于Bootstrap 3中的嵌套行是否不尊重网格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！