Тело {} не распознается, но другие теги:

Question

Я пытаюсь найти лучший способ разделить слова в сетке бутстрапа. col-md-1 находится слишком близко друг к другу в панели заголовка, а col-md-2 - далеко. Я не думаю, что могу просто использовать  /padding-left: а затем col-md-1 и не разбивать сетку. Каков наилучший способ разделить слова между md-1 и md-2?

Так что я хочу, чтобы куриная говядина и стейк были ближе, но не слишком близко, потому что col-md-1 делает их слишком близко друг к другу, и я не хочу разбивать сетку.

<div class="container"> 
     <div id="header"> 
      <div class="row"> 

      <div class="col-md-3"> 


       {{"Recipes"}} 

       </div> 

       <div class="col-md-3"> 
      {{"Chicken"}} 

     </div> 
      <div class="col-md-2"> 
      {{"Beef"}} 

     </div> 

      <div class="col-md-2"> 
      {{"Steak"}} 

     </div> 
       </div> <!--end row--> 



      </div> <!--end header--> 

     </div> <!--end container--> 

Answer 1

бутстрэпы колонна работает в системе с 12 сетки. Если вы хотите, чтобы все было сосредоточено, все должно составлять до 12, чтобы сделать вещи равномерно распределенными.

вот один из способов решить эту проблему, но, пожалуйста, напишите более конкретные вопросы и просмотрите SO сначала .. есть ответы на это в другом месте наверняка.

Также попробуйте исправить свой интервал перед публикацией: P!

CSS

.row{ 
    width:75%; 
    margin:0 auto; 
    text-align:center; 
} 

HTML

<div class="container"> 
    <div id="header"> 
    <div class="row"> 

     <div class="col-md-3"> 
     {{"Recipes"}} 

     </div> 

     <div class="col-md-3"> 
     {{"Chicken"}} 

     </div> 
     <div class="col-md-3"> 
     {{"Beef"}} 

     </div> 

     <div class="col-md-3"> 
     {{"Steak"}} </div> 
    </div> 
    <!--end row--> 


    </div> 
    <!--end header--> 

</div> 
<!--end container-->