Question

我正在尝试创建如下所示的布局：

    C1 C2 C3
    C4 C5 C3
    C6 C7 C3

我在尝试让列填充所有三行的高度时遇到问题。这是我试过的代码。

<div class="container">
    <div class="row equal">
        <div class="col-sm-6 lgImage">

        </div>
    </div>
</div>

<div class="container">
  <div class="row equal">
    <div class="col-sm-3">
    Location:
    </div>
    <div class="col-sm-3">
    Placeholder
    </div>
  </div>

  <div class="row equal">
    <div class="col-sm-3">
     No. of Frames:
    </div>
    <div class="col-sm-3">
    Placeholder
    </div>
  </div>

  <div class="row equal">
    <div class="col-sm-3">
     More Info:
    </div>
    <div class="col-sm-3">
    Placeholder
    </div>
  </div>
</div>

用这个css：

.lgImage {
    background-image: url('TL/TL001/tl002.01-07-2017.13.50.00.jpg');
    right: 0;
    position: absolute;
}

此代码不起作用

Answer 1

<html>

<head>  
 <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<style>
.lgImage {
background-image: url('TL/TL001/tl002.01-07-2017.13.50.00.jpg');
}
.column{height:100px; line-height:100px; background-color:#e5e5e5; text-align:center; margin-bottom:10px;}
.sidebar_div{height:320px; line-height:300px; background-color:#e5e5e5; text-align:center; margin-bottom:10px;}
</style>
</head>
<body>
 <div class="container">
    <div class="row equal">
        <div class="col-sm-6 lgImage">

        </div>
    </div>
 </div>

<div class="container">
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
  <div class="row equal">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="column">
            c1
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="column">
            c2
        </div>
    </div>
  </div>

  <div class="row equal">
   <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="column">
            c4
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="column">
            c5
        </div>
    </div>
  </div>

  <div class="row equal">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="column">
            c6
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="column">
            c7
        </div>
    </div>
  </div>

  </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
        <div class="sidebar_div">
            c3
        </div>
    </div>
 </div>
</body>
</html>

Answer 2

这是你需要的吗？

.lgImage {
  background-image: url('http://placehold.it/800x50');
  right: 0;
  position: relative;
  width: 800px;
  height: 50px;
}

.row.equal {
  display: flex;
  justify-content: space-around;
}

<div class="container">
  <div class="row equal">
    <div class="col-sm-6 lgImage">

    </div>
  </div>
</div>

<div class="container">
  <div class="row equal">
    <div class="col-sm-3">
      Location:
    </div>
    <div class="col-sm-3">
      Placeholder
    </div>
  </div>

  <div class="row equal">
    <div class="col-sm-3">
      No. of Frames:
    </div>
    <div class="col-sm-3">
      Placeholder
    </div>
  </div>

  <div class="row equal">
    <div class="col-sm-3">
      More Info:
    </div>
    <div class="col-sm-3">
      Placeholder
    </div>
  </div>
</div>

Answer 3

此填充确实可以帮助您获得您的要求：

HTML： -

<section class="col-md-8">
    <div class="col-md-6">CL1</div>
    <div class="col-md-6">CL2</div>
    <div class="col-md-6">CL4</div>
    <div class="col-md-6">CL5</div>
    <div class="col-md-6">CL6</div>
    <div class="col-md-6">CL7</div>
</section>
<aside class="col-md-4">
    <div class="col-md-12">CL3</div>
</aside>

Bootstrap - 如何在多行上有列流

3 个答案: