2015-06-22 3 views
0

Я создаю простое меню в верхней части моей веб-страницы, используя bootstrap 3, с классами btn и btn-info в четырех divs (col-md-3). расстояние между кнопками слишком велико. как я могу сократить пространство между ними? например, 5 пикселей. это мой код:Как уменьшить пробел между четырьмя кнопками в bootstrap 3

<div class="container"> 
<div class="row"> 
<div class="col-md-3 col-sm-12 col-xs-12"> 
<button class="btn btn-info"> 
پشتیبانی 
</button> 
</div> 
<div class="col-md-3 col-sm-12 col-xs-12"> 
<button class="btn btn-info"> 
آموزش نصب آی او اس ۹ 
</button> 
</div> 
<div class="col-md-3 col-sm-12 col-xs-12"> 
<button class="btn btn-info"> 
آموزش به دست آوردن یودید 
</button> 
</div> 
<div class="col-md-3 col-sm-12 col-xs-12"> 
<button class="btn btn-info"> 
خانه 
</button> 
</div> 
</div> 
</div>

вы можете найти на веб-сайте по адресу: ios9.siblearn.ir

+0

Я бы не использовать сетку для создания меню. Вместо этого вы должны иметь все эти кнопки в одном и том же div и использовать 'display: inline-block;' (который фактически является свойством отображения по умолчанию для кнопок в Bootstrap, поэтому вам не нужно ничего делать в CSS). – APAD1

ответ

0

Совет для будущего, bootply.com лучше насмешливый до вопросов Bootstrap поскольку оно фреймворк Bootstrap включен по умолчанию. Вот как я бы поставил его:

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <button class="btn btn-info"> 
     پشتیبانی 
     </button> 

     <button class="btn btn-info"> 
     آموزش نصب آی او اس ۹ 
     </button> 

     <button class="btn btn-info"> 
     آموزش به دست آوردن یودید 
     </button> 

     <button class="btn btn-info"> 
     خانه 
     </button> 
    </div> 
    </div> 
</div> 

Bootply Example

Смежные вопросы