Блог

Главная - Вопросы по программированию - Как выровнять панель инструментов кнопок в bootstrap

Как выровнять панель инструментов кнопок в bootstrap

#html #css #twitter-bootstrap #bootstrap-modal

#HTML #css #twitter-bootstrap #bootstrap-модальный

Вопрос:

Что бы я ни делал, я не могу выровнять эту панель инструментов кнопок.Вот как выглядят мои html и css. Я перепробовал почти все, и панель инструментов не центрирована на странице.

  <div class="row center">   
 <div class="btn-toolbar " style="justify-content: center; display: flex;"  role="toolbar"  aria-label="Toolbar with button groups">
     <div class="btn-group mr-2" role="group" aria-label ="First group">
      <button type="button" class="btn btn-secondary" >Pretraži</button>
      <button type="button" class="btn btn-secondary">Poništi pretragu</button>
      <button type="button" class="btn btn-secondary">Snimi Excel</button>
      <button type="button" class="btn btn-secondary">Snimi PDF</button>
      <button type="button" class="btn btn-secondary">Novo  fizičko lice</button>
    </div>
</div>
</div>

И это css

   .btn {
    margin: 3rem; 
padding-left: 0px;
     background-color: blue;
        width: 160px;
        height: 50px; 
         display: flex;
        flex-direction: row;
    justify-content: center;
        align-content: center;
    }
    .btn-toolbar {
        text-align: center;
        justify-content: center;
        align-content: center;
        margin: 0;
    }

Ответ №1:

 .row{
  width:100%;
  border: 1px solid black;
}
.btn {
  padding-left: 0px;
  background-color: blue;
  width: 160px;
  height: 50px;
}

.btn-group {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-content: center;
}  
  <div class="row center">   
 <div class="btn-toolbar" role="toolbar"  aria-label="Toolbar with button groups">
     <div class="btn-group mr-2" role="group" aria-label ="First group">
      <button type="button" class="btn btn-secondary" >Pretraži</button>
      <button type="button" class="btn btn-secondary">Poništi pretragu</button>
      <button type="button" class="btn btn-secondary">Snimi Excel</button>
      <button type="button" class="btn btn-secondary">Snimi PDF</button>
      <button type="button" class="btn btn-secondary">Novo  fizičko lice</button>
    </div>
</div>
</div>

Комментарии:

1. Я бы хотел, чтобы кнопки были разделены, но этот код помещает их в одну строку

2. @Maida не могли бы вы, пожалуйста, поделиться изображением ожидаемого поведения? Я немного смущен, потому что в вашем коде он уже выровнен по центру, но горизонтально.