Как использовать несколько столбцов в Bootsrap, не начиная с столбца 1?

Question

У меня есть две кнопки на странице. Согласно W3Schools , страница разделена на 12 столбцов. Я хочу, чтобы две кнопки были шириной 4 столбца, но от столбца 2 до 5, а вторая - от столбца 8-11. Как я могу это сделать? Для этого я использую bootstrap.

Использование пустых элементов 'p' не работает, как показано ниже.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="row container fluid">
  <p class="col-sm-2"></p>
  <input type="button" id="cancel" name="cancel" value="Cancel" onclick="cancel();" class="col-sm-3">
  <p class="col-sm-2"></p>
  <input type="button" id="registerX" class="col-sm-3" name="registerX" value="Register" onclick="submitCheck();">
  <p class="col-sm-2"></p> <br />
</div>

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

Редактировать: Чтобы увидеть его, откройте код на полной странице.

Answer 1

Оставляю ответ вместо комментария, потому что мне не хватает репутации. Просто хотел бы отметить, что OP использует bootstrap 3, а не 4, поэтому смещение будет записываться как «col-sm-offset-1», а не «offset-sm-1».

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="row container-fluid">
    <div class="col-sm-4 col-sm-offset-1">
        <button type="button" class="btn btn-primary btn-block" id="cancel" name="cancel" value="Cancel" onclick="cancel();">Primary</button>
    </div>
    <div class="col-sm-4 col-sm-offset-2">
        <button type="button" class="btn btn-primary btn-block" id="registerX" name="registerX" value="Register" onclick="submitCheck();">Primary</button>
    </div>
</div>

Answer 2

В bootstrap вы обычно создаете контейнер, который вы заполняете строками, которые заполнены столбцами. Вы применили классы столбцов непосредственно к кнопкам. Хотя это может работать, это не так, как это должно было работать.

В bootstrap документах есть несколько хороших примеров: https://getbootstrap.com/docs/4.0/layout/grid/#offsetting -колонки

Попробуйте:

<div class="container fluid">
  <div class="row">
    <div class="col-sm-4 offset-sm-1">
      <input class="btn btn-primary btn-block" type="button" name="cancel" value="Cancel">
    </div>
    <div class="col-sm-4 offset-sm-2">
      <input class="btn btn-primary btn-block" type="button" name="registerX" value="Register" >  
    </div>
  </div>
</div>

Вы можете установить ваши столбцы до 4, используя класс col-sm-4. Вы можете сдвинуть их, используя offset-sm-X, где X - количество мест, которые вы хотите переместить.

Если вы хотите, чтобы ваши кнопки занимали всю ширину только что созданных столбцов, вы передаете им класс btn-block.

Пример: https://jsfiddle.net/jkrielaars/cno6qhbx/7/

Answer 3

Bootstrap имеет offset вспомогательные классы для этого

https://getbootstrap.com/docs/4.0/layout/grid/#offsetting -колонки

.col-sm-4 {
  border: 1px solid red;
}

.container {
  border: 1px solid blue;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container fluid">
  <div class="row">
    <div class="col-sm-4 offset-md-1">
      <input type="button" id="cancel" name="cancel" value="Cancel" onclick="cancel();">
    </div>
    <div class="col-sm-4 offset-md-1">
      <input type="button" id="registerX" name="registerX" value="Register" onclick="submitCheck();">
    </div>
  </div>
</div>

Answer 4

Использовать смещение

<div class="row container fluid">
  <p class="offset-sm-1"></p>
  <div class="col-sm-3">
     <button type="button" id="cancel" name="cancel" value="Cancel" onclick="cancel();">
  </div>
  <p class="col-sm-2"></p>
  <div class="col-sm-4">
     <button type="button" id="registerX" class="col-sm-3" name="registerX" value="Register" onclick="submitCheck();">
  </div>
</div>

offset-sm-1 оставит одну пустую область размером 1 столбец, чтобы ваш контент начинался со столбца 2 .