Question

实际上我正在使用bootstrap 3.3.6并想要使用bootstrap网格系统实现以下目标：

这些方框都在同一个<div class="row">标签中，我希望方框4占用方框1下方左侧的可用空间。

我知道如何使用普通的html + css进行此操作，但不能使用bootstrap。

感谢您的帮助！

Answer 1

最简单的方法是在第一列中放置 BOX1 和 BOX4 。

#box1 {
  height: 60px;
  background-color: blue;
}
#box2 {
  height: 100px;
  background-color: red;
}
#box3 {
  height: 75px;
  background-color: yellow;
}
#box4 {
  height: 30px;
  background-color: green;
}
#box1,#box2,#box3,#box4 {
  text-align: center;
  color:white;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div id="box1">BOX1</div>
      <div id="box4">BOX4</div>
    </div>
    <div class="col-xs-4">
      <div id="box2">BOX2</div>
    </div>
    <div class="col-xs-4">
      <div id="box3">BOX3</div>
    </div>
  </div>
</div>

Answer 2

您可以通过重新排序 Box2 ＆amp;来使用Bootstrap网格系统实现此目的。 Box3 并将其浮动到右边。

＆＃13;

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

 .content-box {
  border: 2px solid black;
  padding: 2px;
}

.mainbody{
  padding: 50px;
}

.box-spacing{
  margin-bottom: 20px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="mainbody">
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 box-spacing">
            <div class="content-box">
                <div style="background: yellow">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</div>
            </div>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 box-spacing pull-right">
            <div class="content-box">
                <div style="background: yellow">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</div>
            </div>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 box-spacing pull-right">
            <div class="content-box">
                <div style="background: yellow">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
            </div>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 box-spacing">
            <div class="content-box">
                <div style="background: yellow">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</div>
            </div>
        </div>
    </div>
</div>
</div>

＆＃13;

Bootstrap 3网格框应占用自由垂直空间

2 个答案: