0

Использую Bootstrap, сетки. Располагаю следующие элементы в одну строку:

                 <div class="row">
                        <div class="col-md-8"></div>
                        <div class="col-md-2>
                           <input type="submit" class="btn btn-primary" name="opeartion" value="Calculate">
                        <div class="col-md-2">
                           <input type="submit" class="btn btn-primary" name="operation" value="Add">
                       </div>
                </div>

Кнопки не занимают всю отведенную им ширину. Оставшееся место дополняется пробелами.

Делать их шире не нужно, сдвигать при помощи margin будет криво смотреться на маленьких экранах.

Как расположить кнопки справа друг за другом?

1 ответ 1

3

Bootstrap 4

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-8"></div>
  <div class="col-md-4 d-flex justify-content-end">
    <div class="row ml-0 mr-0">
      <input type="submit" class="btn btn-primary" name="opeartion" value="Calculate"/>
      <input type="submit" class="btn btn-primary" name="operation" value="Add"/>
    </div>
  </div>
</div>

Bootstrap 3

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-8"></div>
  <div class="col-md-4">
    <div class="row ml-0 mr-0 pull-right">
      <input type="submit" class="btn btn-primary" name="opeartion" value="Calculate"/>
      <input type="submit" class="btn btn-primary" name="operation" value="Add"/>
    </div>
  </div>
</div>

Bootstrap Flex

3
  • Flex появились только в 4 версии как я понимаю. В 3.7 использовать нельзя(
    – Donatello
    Commented 24 сент. 2018 в 22:00
  • @Donatello вы можете использовать pull-right в bootstrap 3
    – aSpectro
    Commented 24 сент. 2018 в 22:11
  • Спасибо большое!
    – Donatello
    Commented 24 сент. 2018 в 22:14

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.