Запутаться с Bootstrap col-xs-8

Question

Я хочу, чтобы мой входной ящик заполнял только 8 столбцов, которые предоставляет начальная загрузка. В настоящее время это то, что я написал для div:

<div class="shadow bg-white rounded col-lg-5 col-md-5 col-sm-6 col-xs-8 tile">

Однако это текущий результат, который я получаю ...

Есть идеи?

Answer 1

Вы должны поместить внутрь container, а затем сделать offset класса xs следующим образом

<div class="shadow bg-white rounded col-lg-5 col-md-5 col-sm-6 col-xs-8 col-xs-offset-2 tile">

Answer 2

Нет класса col-xs-8 в bootstrap 4.1. это новый класс в начальной версии 4.1 для небольших устройств col-8. Попробуйте это

<div class="row">
  <div class="shadow bg-white rounded col-lg-5 col-md-5 col-sm-6 col-8 tile">

  </div>
</div>

Answer 3

Вы должны положить внутрь container, а затем сделать offset

<div class="col-md-8 offset-md-2">

Примечание: я не уверен, ответит ли это на ваш вопрос или нет, потому что вы не задали вопрос четко.

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

<div class="container">
  <div class="row">
    <div class="col-md-8 offset-md-2">
      <label>Email</label><br>
      <input type="email" class="form-control">
      <label>Password</label><br>
      <input type="password" class="form-control">
      <br>
      <button type="submit" class="btn btn-outline-primary btn-sm">Login</button>
    </div>
   </div>
</div>

Answer 4

Вы должны обернуть его в ряд.

    <div class="row">
       <div class="shadow bg-white rounded col-lg-5 col-md-5 col-sm-6 col-xs-8 tile">
       ....Your Input stuff etc...
       </div>
    </div>

Возможно, вы также хотите justify-content-center, поэтому ваш контент (вход) находится в центре страница.

Больше информации