Question

我在Bootstrap嵌套方面遇到了一些问题。

我试图像这样做一个图像网格：我目前的代码：

<div class="row"> 

<div class="col-md-4"><div style="background-color: red;">1</div></div>
<div class="col-md-4">                            
<div class="row">

<div class="col-md-2"><div style="background-color:green;">2</div></div>
<div class="col-md-2"><div style="background-color:blue;">3</div></div>        
</div>     

<div class="row">
<div class="col-md-4"><div style="background-color: grey;">5</div></div>
</div>    
</div>

<div class="col-md-3"><div style="background-color: purple;">4</div></div>  

</div>

但我目前得到的是：

有没有人对我做错了什么有任何想法？

Answer 1

您案例中的嵌套似乎是错误的。您应该将30％的空间视为一个新行。对于2和3，它应该是col-md-6。我猜你需要使用container-fluid来进行这种布局并尝试这种方式：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-4">
      <div style="background-color: red;">1</div>
    </div>
    <div class="col-xs-4">
      <div class="row">
        <div class="col-xs-6">
          <div style="background-color:green;">2</div>
        </div>
        <div class="col-xs-6">
          <div style="background-color:blue;">3</div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <div style="background-color: grey;">5</div>
        </div>
      </div>
    </div>
    <div class="col-xs-3">
      <div style="background-color: purple;">4</div>
    </div>
  </div>
</div>

＆＃13;

注意：我已将所有课程更改为xs-*以方便预览。您可以在应用程序中将其更改为md-*。

此外，为了获得masonry样式输出，您可能需要添加一些额外的类来告知它应该采用两个元素高度等。

＆＃13;

.row {margin-bottom: 25px;}
.height-2x {line-height: 1.75;}
.height-2x > div {padding-bottom: 40px;}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-4 height-2x">
      <div style="background-color: red;">1</div>
    </div>
    <div class="col-xs-4">
      <div class="row">
        <div class="col-xs-6">
          <div style="background-color:green;">2</div>
        </div>
        <div class="col-xs-6">
          <div style="background-color:blue;">3</div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <div style="background-color: grey;">5</div>
        </div>
      </div>
    </div>
    <div class="col-xs-3 height-2x">
      <div style="background-color: purple;">4</div>
    </div>
  </div>
</div>

＆＃13;

预览

Answer 2

我认为这会对你有所帮助。

＆＃13;

div {
  text-align: center;
  font-size: 40px;
  color: #fff;
}

.col-xs-6 {
  height: 100px;
}

.row {
  height: 100px;
  margin-bottom: 20px;
}

.col-xs-4 {
  height: 180px;
}

.div1,
.div4 {
  background: green;
}

.div2 > div,
.div3 > div,
.div5 > div {
  background: red;
  height: 100%;
}

.div5 > div {
  height: 100%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="col-xs-4 div1">1</div>
  <div class="col-xs-4">
    <div class="row">
      <div class="col-xs-6 div2">
        <div>2</div>
      </div>
      <div class="col-xs-6 div3">
        <div>3</div>
      </div>

    </div>
    <div class="row">
      <div class="col-xs-12 div5">
        <div>5</div>
      </div>
    </div>
  </div>

  <div class="col-xs-4 div4">4</div>
</div>

＆＃13;

Bootstrap有一个嵌套问题

2 个答案: