Question

我使用引导网格系统并遇到了问题。我想制作一个页面的一部分，它在中心分开，每边都有单独的信息。我的HTML看起来像这样。

<div class="container">
        <div class="friendly col-sm-12">
            <div class="col-sm-6">
                <div class="row">
                    <div class="col-sm-3">
                        <!--stuff goes here-->
                    </div>
                    <div class="col-sm-3">
                        <!--stuff goes here-->
                    </div>
                </div>
                <div class="friendly col-sm-6">
                    <div class="col-sm-3">
                        <!--bigger stuff goes here!-->
                </div>
            </div>
        </div>
    </div>

CSS

.friendly {
    display: inline-block;
}

我遇到的问题是，为了使两个较大的div成为内联，它们必须变得更小（比如一个col-sm-4，一个col-sm-6）和col -sm-3s不会占用整个col-sm-6。如何正确地在列中放置一列并确保所有内容的大小正确？并且根本不应该有基本的12个部分让我按自己的意愿做点什么？如果我在列中有一列，会有什么变化吗？感谢

Answer 1

我不确定我是否明白你所追求的是什么，但它似乎是一个更简单的结构。

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <!--stuff goes here-->
        </div>

        <div class="col-sm-3">
            <!--stuff goes here-->
        </div>

        <div class="col-sm-6">
            <!--bigger stuff goes here!-->
        </div>
    </div>
</div>

这样会产生如下布局：

| 25% | 25% |     50%     |

对于它的价值，这里有一个嵌套行的相同布局：

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="row">
                <div class="col-sm-6">
                    <!--stuff goes here-->
                </div>

                <div class="col-sm-6">
                    <!--stuff goes here-->
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <!--bigger stuff goes here!-->
        </div>
    </div>
</div>

请注意，每行中的列总和为12个单位。

Answer 2

看看这个嵌套列结构的例子：

Bootply

<div class="container">
  <div class="well">
    <div class="col-xs-6">
      <div class="well">
        <div class="row">
          <div class="col-xs-3">
            <div class="well">

            </div>
          </div>
          <div class="col-xs-3">
            <div class="well">

            </div>
          </div>
          <div class="col-xs-6">
            <div class="well">

            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="well">
        <div class="row">
          <div class="col-xs-12">
            <div class="well">

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

注意

well类用于显示元素的放置位置，但可以替换为您想要的任何内容。

希望这能提供一些见解。

修改太多容器，row将完成同样的事情。

干杯！

使用引导程序将列放在列中

2 个答案: