Question

我有类似的东西

<div class="container">

   <div class="row">

         <div class="col-md-5 midOne">
            //...some content here

         </div>    

   </div>

</div>

我是bootstrap的新手，我希望这个col在类midOne中居中，是否有办法使这个midOne div居中，而不是在midOne的每一边都有两个新的div来居中？

当我做这个

<div class="col-md-4 emptyone">
            //...empty Div

         </div> 
<div class="col-md-4 midOne">
            //...some content here

 </div> 
 <div class="col-md-4 emptytwo">
            //...empty div two

 </div>

它正在工作，midOne中的内容以容器div为中心。每侧有两个空div。

Answer 1

你必须使用.col-md-offset-4和.col-md-4

<div class="row">
    <div class="col-md-4 col-md-offset-4">
    </div>
</div>

文档：http://getbootstrap.com/css/#grid-offsetting

Answer 2

试试这个。

＆＃13;

 .midOne {
    width:41.6667%;
  background-color:red;
  height:100px;
  margin:auto;
  }

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="midOne">
              <div class="col-md-5 col-xs-5">
                   </div>
    </div>

＆＃13;

如何使用Bootstrap中的容器类在div中心创建一个列

2 个答案: