Bootstrap - Justify DIVS

Question

Я стараюсь, чтобы выровнять мои дивы, как на изображении ниже

мой код выглядит

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <a href="#">restaurant</a> 
     <a href="#">halls</a> 
     <a href="#">menu</a> 
     <a href="#">reservation</a> 
     <a href="#">store</a> 
     <a href="#">reviews</a> 
     <a href="#">news</a> 
     </div> 
    </div> 
    </div> 

Проблема заключается в том, я не знаю, как сделать это с самозагрузки. Я попытался поставить a внутри div с классом col-md-2, но он не выровнен. Кроме того, я попытался установить float: left; для первого a, float: right; для последнего и установить text-align: center для остальной части a, но это все еще не оправдало правильно

Answer 1

Я сделал это с бутстрапом nav

<div class="container"> 
    <ul class="nav nav-justified"> 
     <li><a href="#"><%= t('navigation.restaurant') %></a></li> 
     <li><a href="#"><%= t('navigation.halls') %></a></li> 
     <li><a href="#"><%= t('navigation.menu') %></a></li> 
     <li><a href="#"><%= t('navigation.reservation') %></a></li> 
     <li><a href="#"><%= t('navigation.store') %></a></li> 
     <li><a href="#"><%= t('navigation.reviews') %></a></li> 
     <li><a href="#"><%= t('navigation.news') %></a></li> 
    </ul> 
    </div> 

Answer 2

попробовать это один:

.container 
{ 
    background:black; 
    padding:20px; 
    float:left; 
} 
.row 
{ 
    position:relative; 

} 
.col-md-12 a 
{ 
    text-decoration:none; 
    color:white; 
    text-align:center; 
    padding:5px; 


} 

DEMO HERE

Answer 3

Это способ добиться этого. Это называется системой сетки в Bootstrap:

<div class=row> 
    <div class="col-md-1"> 
     <center><a href="#">restaurant</a></center> 
    </div> 
    <div class="col-md-1"> 
     <center><a href="#">halls</a></center> 
    </div> 
    <div class="col-md-1"> 
     <center><a href="#">menu</a></center> 
    </div> 
    <div class="col-md-1"> 
     <center><a href="#">reservation</a></center> 
    </div> 
    <div class="col-md-1"> 
     <center><a href="#">store</a></center> 
    </div> 
    <div class="col-md-1"> 
     <center><a href="#">reviews</a></center> 
    </div> 
    <div class="col-md-1"> 
     <center><a href="#">news</a></center> 
    </div> 

    </div> 

Answer 4

попробовать это ..

<ul class="nav nav-pills"> 
    <li role="presentation" class="active"><a href="#">restaurant</a></li> 
    <li role="presentation"><a href="#">halls</a></li> 
    <li role="presentation"><a href="#">menu</a></li> 
    <li role="presentation"><a href="#">reservation</a></li> 
    <li role="presentation"><a href="#">store</a></li> 
    <li role="presentation"><a href="#">reviews</a></li> 
    <li role="presentation"><a href="#">news</a></li> 
</ul> 

Answer 5

попробовать это:

.container .row{ 
    text-align: center; 
} 
.container .row a{ 
    margin: 0 20px; 
} 

jsfiddle

Answer 6

вы просто должны добавить несколько стилей и класс, вот и все.

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-md-12 text-center"> 
     <a href="#">restaurant</a> 
     <a href="#">halls</a> 
     <a href="#">menu</a> 
     <a href="#">reservation</a> 
     <a href="#">store</a> 
     <a href="#">reviews</a> 
     <a href="#">news</a> 
    </div> 
    </div> 
</div> 

и стили

a { 
    margin: 10px 10px 0; 
    border-top: 1px solid #000; 
    border-bottom: 1px solid #000; 
    padding: 10px 0; 
    display: inline-block 
} 

a:first-of-type { 
    margin-left: 0 
} 

a:last-of-type { 
    margin-right: 0 
} 

и здесь рабочая скрипка ..

https://jsfiddle.net/Anuj_Kumar/45Lvf6r5/1/embedded/result/