Question

我有一个水平条，我想把部分放到那个栏中。我想不出一种动态居中的方法 - 也就是说如果我将1个部分放到中心，如果我有2个部分则将它放在中心位置，如果我有3个部分则中间部分居中并且其他两个都在两边，等等。我用javascript改变了部分的数量，所以我不能只针对特定数量的部分来解决这个问题。

我该怎么办？此外，我意识到部分名称没有显示在代码段上（但它们在我的实际网站上）。

.middle-section {
  height: 100px;
  
  width: 800px;
  margin: 0 auto;
  background-color: #F6F7F8;
  border-radius: 5px;
  transform: translate(0%,-50%);
  
  -webkit-box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.75);
box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.75);
  
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class = 'container-fluid'>
<div class = 'middle-section'>
    <div class = 'row'>
 <div class ='col-md-2'>
   Section 
 </div>
 <div class ='col-md-2'>
   
   Section
 </div>
      
    </div>
    
  </div>
  </div>

Answer 1

我使用flexbox来解决你的问题，只需添加一些div来尝试它：

JSfiddle

您可以选择为所有div辩护：center，space-around或space-beween

＆＃13;

.middle-section {
  height: 100px;
  
  width: 800px;
  margin: 0 auto;
  background-color: #F6F7F8;
  border-radius: 5px;
  
  -webkit-box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.75);
box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.75);
  
}

.customrow {display:flex; flex-wrap:wrap;justify-content:space-around; }

.customrow-child {border:1px solid black;}

＆＃13;

<div class = 'container-fluid'>
  <div class = 'middle-section'>
    <div class = 'row customrow'>
       <div class ='col-md-2 row-child customrow-child'>
         Section 
       </div>
       <div class ='col-md-2 row-child customrow-child'>
   
         Section
       </div>
      
      </div>
    
    </div>
  </div>

＆＃13;

Answer 2

只需Text-align:center

＆＃13;

.middle-section {
  height: 100px;
  width: 800px;
  margin: 0 auto;
  background-color: #F6F7F8;
  
  border-radius: 5px;
   -webkit-box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.75);
   -moz-box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.75);
   box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.75);
}
.middle-section .row{
  text-align:center;
  }
.middle-section .row .col-md-2{
  display:inline-block;
  }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class = 'container-fluid'>
<div class = 'middle-section'>
    <div class = 'row'>
 <div class ='col-md-2'>
   Section 
 </div>
  <div class ='col-md-2'>
   Section
 </div>
  <div class ='col-md-2'>
   Section
 </div>
 <div class ='col-md-2'>
   Section
 </div>
 </div>
    
</div>
</div>

＆＃13;

小提琴： https://jsfiddle.net/sank8893/osz13nd8/1/

Answer 3

您可以通过添加偏移

来实现

这只是一个非违反的引导程序解决方案。但是，当然有很多解决方法。但这是bootstrap默认类的快速解决方案。

HTML，

<div class="container-fluid">
    <div class="row middle-section">
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xs-offset-4 col-sm-offset-4 col-md-offset-4 col-lg-offset-4">Section</div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">Section</div>
    </div> 
</div>

CSS，

.middle-section {
  height: 50px;
  width: 800px;
  margin: 0 auto;
  background-color: #F6F7F8;
  border-radius: 5px;

  -webkit-box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.75);
  -moz-box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.75);
  box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.75);
}

请参阅示例：https://jsfiddle.net/ywdwnq2s/2/

您可以在引导文档http://getbootstrap.com/css/#grid-responsive-resets

中找到更多详细信息

为了使它更加动态，您可以通过添加一些额外的样式来重写默认值

HTML，

<div class="container-fluid">
    <div class="row middle-section">
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 inner-section">Section </div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 inner-section">Section</div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 inner-section">Section</div>
    </div> 
 </div>

CSS，

.middle-section {
  height: 50px;
  width: 800px;
  margin: 0 auto;
  background-color: #F6F7F8;
  border-radius: 5px;
  text-align: center;

  -webkit-box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.75);
  -moz-box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.75);
  box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.75);
}

.inner-section {
  text-align: center;
  float: none;
  display: inline-block;
}

请参阅示例：https://jsfiddle.net/ywdwnq2s/4/

bootstrap动态居中列

3 个答案: