Question

我想用div包装我的col - * - 5。

<div class="row">
 <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
   <div class="wrapper">
    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5"> content1 </div>
    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5"> content2 </div>
   </div>
 <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
</div>

我的包装器的宽度为body，height = 1.我试图添加overflow: hidden;在这种情况下，div包含我的cols-5但最后一个col-1正在移动到下一行（包装器在第二行后没有结束） col-5，它到了页面的末尾。）

Answer 1

包装器应该具有引导程序宽度类，可能是col-xs-10。那么内部xs-6等？

.col-xs-1 {
  border: 1px solid red;
}
.wrapper {
  border: 1px solid grey;
  text-align: center;
  background: #bada55;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">col1</div>
  <div class="wrapper col-xs-10 col-sm-10 col-md-10 col-lg-10">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">content1</div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">content2</div>
  </div>
  <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">col1</div>
</div>

如何用div包装bootstrap cols？

1 个答案: