Question

Here is an image我尝试使用引导网格系统在bootstrap中创建的布局。

我觉得我很接近，但我错过了一些东西。这是我到目前为止所做的，你可以在codepen中看到它。我按照html结构中按时间顺序排列的每个方框命名。

例如，这就是我构建中间框的方式：

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

            <div class="col-xs-12">
            <p>2</p>
            </div>

            <div class="col-xs-6">
                <p>3</p>
            </div>

            <div class="col-xs-6">
                <p>4</p>
            </div>

            <div class="col-xs-12">
                <p>5</p>
            </div>

        </div>

然后我有了这个，但是框7没有像我想要的那样与中间栏对齐：

        <div class="col-xs-3">
            <p>6</p>
            <p>6</p>
            <p>6</p>
        </div>

        <div class="col-xs-9">
            <p>7</p>
        </div>

这是我应该使用行和列以及网格结构的方式，如果我想在第一个链接中实现如图所示的布局吗？请参阅完整的codepen代码。

Answer 1

您只是遗漏了一条关于nesting columns

的重要Bootstrap规则

内容应放在列中，并且只能列行的直接孩子。

https://codepen.io/anon/pen/yvmBPa

       <div class="row">
            <div class="col-xs-3">
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
            </div>
            <div class="col-xs-6">
               <div class="row">
                <div class="col-xs-12">
                <p>2</p>
                </div>

                <div class="col-xs-6">
                  <p>3</p>
                </div>

                <div class="col-xs-6">
                  <p>4</p>
                </div>

                <div class="col-xs-12">
                  <p>5</p>
                </div>
               </div>
            </div>
            <div class="col-xs-3">
                <p>6</p>
                <p>6</p>
                <p>6</p>
            </div>
            <div class="col-xs-9">
                <p>7</p>
            </div>
        </div>

在bootstrap中，如何正确使用嵌套的行/列div来创建特定的布局？

1 个答案: