与Bootstrap col-xs-8混淆

Question

我希望登录框仅填充bootstrap提供的8列。目前，这是我为div编写的内容：

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

但这是我得到的当前结果...

有什么想法吗？

Answer 1

col-xs-8中没有bootstrap 4.1类。这是用于小型设备col-8的引导程序4.1中的新类。试试这个

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

  </div>
</div>

Answer 2

您必须将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 3

您必须放入container内，然后像这样使xs类的offset

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

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，以便您的内容（输入）位于 这页纸。

More Infos