Question

我尝试在图片上制作html布局。浅蓝色col-md-2 div包含图像，深蓝色col-md-4也是图像。粉色div包含文本。请给出一个简单的html布局，它可以实现图片上的内容。

Answer 1

当然有可能。这是一个完全功能性的例子：

body {
  height: 100%;
  width: 100%;
}
.container {
  width: 1000px;
  max-width: 100%;
  height: 100%;
  background: #E5FF5E;
  padding: 100px 100px 100px 100px !important;
}
.row {
   min-height: 1000px;
   background: red;
}
.vertical {
  display: table-cell;
  vertical-align: middle;
}
.rows {
  height: 200px;
  margin-bottom: 10px;
}
#left-container {
  background: #6AFF98;
  height: 1000px;
  display: table;
}
#right-container {
  background: #6FFFE9;
  height: 1000px;
}
@media (max-width: 767px) {
  #left-container {
    width: 100%;
  }
}
@media (max-width: 991px) and (min-width: 767px) {
  #left-container {
    width: 100%;
  }
}
@media (max-width: 991px) {

}
#r1c1 {
  height: inherit;
  background: #FF76FD;
}
#r1c2 {
  height: inherit;
  background: #A1FFE8;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="container">
    <div class="row">
      <div id="left-container" class="col-md-8">
        <div class="vertical">
          <div class="rows">
            <div id="r1c1" class="col-md-8"></div>
            <div id="r1c2" class="col-md-4"></div>
          </div>
          <div class="rows">
            <div id="r1c1" class="col-md-4"></div>
            <div id="r1c2" class="col-md-8"></div>
          </div>
          <div class="rows">
            <div id="r1c1" class="col-md-8"></div>
            <div id="r1c2" class="col-md-4"></div>
          </div>
        </div>
      </div>
      <div id="right-container" class="col-md-4"></div>
    </div>
  </div>
</body>

Answer 2

Twitter Bootstrap中的所有列都是浮动元素。因此，您无法通过Twitter Bootstrap类获得内容中心。您可以在块上尝试类似display: table-cell; vertical-align: middle;的样式：col-md-8和col-md-4。

检查http://jsfiddle.net/rajesh14mar/qc9zfpo6/

Answer 3

是的，但是每个＆＃39; .row＆＃39;必须在其中的列等于12列。所以父列div等于12 col-md-8和col-md-4。但是col-md-8 div内的子div不等于12.所以那些也必须是8和4。或9和3 ...只要它等于12.它只取决于内容是什么。此外，您可以包含div中的所有内容以及div到视口的中心。

但这种布局是可能的。下面我重点介绍了你应该使用的网格系统布局。

我为列着色，以便您可以看到网格布局。希望这有帮助！

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class='main-container'>
  <div class='row'>
    <div class='col-xs-8' style='Background-color: red; height: 300px;'>
      col-8
      <div class='row'>
        <div class='col-xs-8' style='background-color: blue; height: 80px;'>col8</div>
        <div class='col-xs-4' style='background-color: black; height: 80px;'>col4</div>
      </div>
      <div class='row'>
        <div class='col-xs-4' style='background-color: black; height: 80px;'>col4</div>
        <div class='col-xs-8' style='background-color: blue; height: 80px;'>col8</div>
      </div>
      <div class='row'>
        <div class='col-xs-8' style='background-color: blue; height: 80px;'>col8</div>
        <div class='col-xs-4' style='background-color: black; height: 80px;'>col4</div>
      </div>
    </div>
    <div class='col-xs-4' style='background-color: blue; height: 300px;'>col-4</div>
  </div>
</div>

＆＃13;

使用Twitter Bootstrap可以使用以下html布局吗？

3 个答案: