与 Bootstrap col-xs-8 混淆答案

【问题标题】：Getting confused with Bootstrap col-xs-8与 Bootstrap col-xs-8 混淆
【发布时间】：2018-10-30 15:07:36
【问题描述】：

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

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

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

有什么想法吗？

【问题讨论】：

你期待什么结果？也许展示它并分享更多你的代码。
添加更多代码或为相同的代码创建小提琴。
阅读the docs。 Bootstrap 4 中没有 -xs。

标签： html bootstrap-4

【解决方案1】：

bootstrap 4.1 中没有 col-xs-8 类。这是引导 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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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">

【讨论】：

【解决方案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

【讨论】：