我如何用 div 包装 bootstrap 列？

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>

我的包装器的宽度为正文，高度 = 1。我尝试添加 overflow: hidden; 在这种情况下，div 包装了我的 cols-5 但最后的 col-1 正在移动到下一行 (包装器不会在第二个 col-5 之后结束，它会转到页面末尾）。

Answer 1

包装纸应具有 bootstrap 宽度 class，也许 col-xs-10。然后内部 xs-6 etc?

.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 列？

How can i wrap bootstrap cols with div?

css

wrapper

twitter-bootstrap

responsive