бутстрап динамически центрирующие столбцы

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, чтобы решить вашу проблему, просто добавьте некоторые дивы попробовать:

JSfiddle

Вы можете выбрать, чтобы оправдать все ваши дивы: center, space-around или space-beween

.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;}

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

Answer 2

Вы можете сделать это путем добавления смещения,

Это просто не нарушается самозагрузки решение. Но да, конечно, для этого много работы. Но это быстрое решение по классам загрузки 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/

Answer 3

Просто Text-align:center

.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; 
 
    }

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

Fiddle:https://jsfiddle.net/sank8893/osz13nd8/1/