Блог

На моей веб-странице (с использованием начальной загрузки) Мне нужно отобразить кнопку, выровненную по правому краю, и счетчик, центрированный В НОВОЙ СТРОКЕ.

Но я получаю счетчик в той же строке, центрированный в остальной части строки…

Мой код:

 <div>
  <button type="button" class="btn btn-primary mt-4 float-right">Text</button>
</div>  

<div class="text-center mt-4">
  <div class="spinner-border" role="status"></div>
</div>
  

Что я делаю не так?

Спасибо,

Диего

Вы можете использовать сеточную систему Bootstrap и определить две строки со столбцом во всю ширину. Я переместил margin-top mt-4 на второй .row , чтобы предоставить это поле для полной строки.

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col">
      <button type="button" class="btn btn-primary mt-4 float-right">Text</button>
    </div>
  </div>
  <div class="row mt-4">
    <div class="col text-center">
      <div class="spinner-border" role="status"></div>
    </div>
  </div>  
</div>  

Для того, чтобы разместить свой <button> полностью справа, просто удалите <div class="container"> . Пожалуйста, прочтите это для получения дополнительной информации.

Конечно, есть несколько других вариантов получения желаемого результата, например, использование многострочных файлов одинаковой ширины:

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col">
      <button type="button" class="btn btn-primary mt-4 float-right">Text</button>
    </div>
    <div class="w-100"></div>
    <div class="col mt-4 text-center">
      <div class="spinner-border" role="status"></div>
    </div>
  </div>  
</div>  

Удачи!