在Bootstrap中如何让两个不同尺寸的行在彼此之间

我正在使用Bootstrap 3.我有两行。第一行有4x3列。第二行有一列3和一列9. 9的列的高度是所有其他列的两倍。我想在第二行的第3列下添加一列。我已经形成了一个图像来解释它。在Bootstrap中如何让两个不同尺寸的行在彼此之间

绿色是一排紫色是一排。我试图把黄色放在它自己的一排，但是它显示在左边，但不是在小紫色块的底部。我也将小紫色和黄色块放在同一行上，但是它们会在下面显示90块。

2014-03-19 timmy

你为什么不遵循这个

<div class="row"> 
    <div class="col-md-3"></div> 
    <div class="col-md-3"></div> 
    <div class="col-md-3"></div> 
    <div class="col-md-3"></div> 
</div> 
<div class="row"> 
    <div class="col-md-3"> 
     <div class="row"> 
      <div class="col-md-12"></div> 
      <div class="col-md-12"></div> 
     </div> 
    </div> 
    <div class="col-md-9"> 
     <div class="col-md-12"></div> 
    </div> 
</div>

以后，你可以用CSS

来源

2014-03-19 15:01:31 Ahmedskaya

是做到了。谢谢！ – timmy

也谢谢你=） – Ahmedskaya

的引导电网系统控制列的宽度而不是高度绝招吧。您可以使用预期的网格图案实现所需的布局，并使用高度规则使底边齐平。

http://jsfiddle.net/rblakeley/ruggnzvq/

<html> 
<head> 
    <title>Bootstrap grid example</title> 

    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 

    <style type="text/css"> 

    div[class^="col"] { height: 40px; text-align: center; border: 1px dashed red; background: #fcc;} 
    .row:nth-child(2) div[class^="col"] { background: #cfc;} 
    .row:nth-child(2) > div[class^="col"]:first-child { border: none;} 
    .row:nth-child(2) > div[class^="col"]:nth-child(2) { height: 100px;} 
    .row:nth-child(2) .row div[class^="col"]:nth-child(2) { height: 60px; background: #ccf;} 

    </style> 

</head> 
<body> 

<div class="container-fluid"> 

    <div class="row"> 
    <div class="col-xs-3">3</div> 
    <div class="col-xs-3">3</div> 
    <div class="col-xs-3">3</div> 
    <div class="col-xs-3">3</div> 
    </div> 
    <div class="row"> 
    <div class="col-xs-3"> 
     <div class="row"> 
     <div class="col-xs-12">3</div> 
     <div class="col-xs-12">3</div> 
     </div> 
    </div> 
    <div class="col-xs-9">9</div> 
    </div> 

</div> 
</body> 
</html>

来源

2014-03-19 15:24:23 rojobuffalo

+1为小提琴 –

在Bootstrap中如何让两个不同尺寸的行在彼此之间

回答

相关问题