Как применить смещение к строке в Bootstrap Twitter? - PullRequest
Новая
       19

Как применить смещение к строке в Bootstrap Twitter?

0 голосов
/ 08 июля 2019

У меня есть строка, которая должна иметь смещение на обоих концах. Вот пример: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-2 offset-xs-2">
      <input type="submit" name="btn" value="OK" class="btn btn-primary">
    </div>
    <div class="col-xs-2">
      <input type="button" name="cancel" value="Cancel" class="btn btn-primary">
    </div>
    <div class="col-xs-2">
      <input type="button" value="Open" class="btn btn-primary">
    </div>
    <div class="col-xs-2 ">
      <input type="button" name="page" class="btn btn-primary " value="Page">
    </div>
  </div>
</div>

Есть ли способ применить смещение к этой сетке, которое сместит кнопки в центр? Это должно работать на всех экранах одинаково.

1 Ответ

0 голосов
/ 08 июля 2019

Вы используете синтаксис Bootstrap 4 со ссылкой CSS 3.3.7.

Bootstrap 4: offset-xs-2

Bootstrap 3: col-xs-offset-2

Я изменил offset-xs-2 на col-xs-offset-2. 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-2 col-xs-offset-2">
      <input type="submit" name="btn" value="OK" class="btn btn-primary">
    </div>
    <div class="col-xs-2">
      <input type="button" name="cancel" value="Cancel" class="btn btn-primary">
    </div>
    <div class="col-xs-2">
      <input type="button" value="Open" class="btn btn-primary">
    </div>
    <div class="col-xs-2 ">
      <input type="button" name="page" class="btn btn-primary " value="Page">
    </div>
  </div>
</div>
...