Question

如何在引导程序中创建两行而不使用带有像素的另一行和带有百分比的另一行？

<div class="container-fluid">
    <div class="row main_header">
        sadf
    </div>
    <div class="row main_second">
        <div class="col-lg-2 main_left">
            test
        </div>
        <div class="col-lg-10 main_right">
           test 
        </div>
    </div>
 </div>

如何在引导程序中创建两行而不使用带有像素的另一行和带有百分比的另一行？

    .main_header{
    height: 80px;
    background-color: #606060;
    color: #fff
}
.main_left{
    height: 100%;
    background-color: #D8D8D8;
} .main_right{
    height: 100%;
    }
.main_second{
     height: 100%;
}

Answer 1

我认为你不需要使用任何额外的CSS来实现你想要的东西，因为Bootstrap已经拥有一个非常成熟的网格系统。请参阅以下fiddle中的以下示例！

我使用的所有内容都是Twitter Bootstrap V3.3.4的以下几行：

<div class="row">
     <div class="row">
        <div class="col-sm-4" style="background-color:red;">.col-sm-4</div>
     </div>
     <div class="row">
        <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
     </div>
  </div>

你可以在这两个div中添加任何额外的div。通过these kind of tutorials非常好地了解网格系统。

我认为最好看下面的StackOverflow answer。

如何在引导程序中创建两行而不使用带有像素的另一行和带有百分比的另一行？

1 个答案: