使用Bootstrap将另一列中的4列居中

Question

我有一个9列，在这里面有另外4列。我正在尝试让4列成为列的中心，因为它们被设置为最大宽度为198px。

<div class="content col-md-9">
    <div class="item col-md-3">
        <img src="assets/img/demo/1.png" width="198" height="266" alt="" class="img-responsive" />
        <p class="hs-label"></p>
        <p class="hs-label"></p>
    </div>
    <div class="item col-md-3">
        <img src="assets/img/demo/2.png" width="198" height="266" alt="" class="img-responsive" />
    </div>
    <div class="item col-md-3">
        <img src="assets/img/demo/3.png" width="198" height="266" alt="" class="img-responsive" />
        <p class="hs-label"></p>
        <p class="hs-label"></p>
        <p class="hs-label"></p>
    </div>
    <div class="item col-md-3">
        <img src="assets/img/demo/4.png" width="198" height="266" alt="" class="img-responsive" />
        <p class="hs-label"></p>
        <p class="hs-label"></p>
        <p class="hs-label"></p>
    </div>
    <div class="item col-md-3">
        <img src="assets/img/demo/5.png" width="198" height="266" alt="" class="img-responsive" />
    </div>
    <div class="item col-md-3">
        <img src="assets/img/demo/6.png" width="198" height="266" alt="" class="img-responsive" />
        <p class="hs-label"></p>
        <p class="hs-label"></p>
    </div>
</div>

CSS：

.content.col-md-9 > .item.col-md-3 {
    background: #ffffff;
    max-width: 198px;
    border: 5px solid #ffffff;
    padding: 0!important;
    margin: 7px;
}

.content.col-md-9 > .item.col-md-3 img {
    margin-bottom: 0px;
}

.content.col-md-9 > .item.col-md-3 .hs-label {
    background: #cccccc;
    text-transform: uppercase;
    width: auto;
    display: inline-block;
    padding: 2px 5px;
    color: #ffffff;
    margin: 5px 0 0 0;
}

如上所述，将每列的最大宽度设置为198px。我需要col md-3都是col md-9的中心，这样在col md-3的左边和右边都有相等的空间。

Answer 1

作为一个最基本的示例，您可以使用Bootstrap中的以下代码来实现这种样式的布局。

​

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-10 col-xs-offset-1">
      <div class="well clearfix">
        
		<div class="col-xs-3">
          <div class="well text-center">Test</div>
		</div>
      
		<div class="col-xs-3">
          <div class="well text-center">Test</div>
		</div>

		<div class="col-xs-3">
          <div class="well text-center">Test</div>
		</div>

        <div class="col-xs-3">
          <div class="well text-center">Test</div>
		</div>

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

​

注意:出于SO代码段的目的，我使用了.container-fluid和.col-xs-*。我还将.col-xs-9更改为.col-xs-10，以允许两端的偏移量相等。您可能需要对此进行调整，以更好地适应您的设计的更大范围。