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中的以下内容实现此布局样式。

＆＃13;

<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>

＆＃13;

注意：出于SO片段的目的，我使用了.container-fluid和.col-xs-*。我还将.col-xs-9更改为.col-xs-10，以允许任何一方都有相同的偏移量。您可能需要对此进行调整，以更好地适应您设计的更大范围。

使用Bootstrap在另一列内部居中4列

1 个答案: