`col-xs- *`在Bootstrap 4中不起作用

168

我以前从未遇到过，而且我很难找到解决方案。当在引导程序中具有等于medium的列时，如下所示：

<h1 class="text-center">Hello, world!</h1>

  <div class="container">
      <div class="row">
          <div class="col-md-12 text-center">
              <h1>vicki williams</h1>
          </div>
      </div>
  </div>

文本对齐可以正常工作：

但是当使列等于超小时，如下所示：

 <div class="container">
      <div class="row">
          <div class="col-xs-12 text-center">
              <h1>vicki williams</h1>
          </div>
      </div>
  </div>

然后，文本对齐将不再起作用：

是否有一些我不理解的引导概念，或者这实际上是我认为是错误的。我从来没有遇到过这个问题，因为我的文字在过去一直与xs对齐。任何帮助将不胜感激。这是我完整的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  </head>
  <body>
    <h1 class="text-center">Hello, world!</h1>

      <div class="container">
          <div class="row">
              <div class="col-xs-12 text-center">
                  <h1>vicki williams</h1>
              </div>
          </div>
      </div>

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>
</html>

— YoungCoder
source

7

col-xs-*在最新的v4版本中不再存在，这就是您看到此内容的原因。在col-xs-12不具有设定宽度的喜欢你的100％ col-md-12。检查DevTools以查看所有内容，并查看此Pull

— vanburen

435

col-xs-* 已在Bootstrap 4中删除，以支持 col-*。

替换col-xs-12为col-12，它将按预期工作。

还请注意在v4中col-xs-offset-{n}已被替换offset-{n}。

— tao
source

8

从未想过/对此一无所知！非常感谢。

— YoungCoder

12

始终检查文档。编码愉快！::} <（（（** :: ::

— tao

8

这通常不是您要检查文档的内容。我到处都是文档，也错过了。我曾经考虑过，现在在两次bs4站点迁移中，col是通用的，而col-xs是特定的，但是事后看来，这没有任何意义，因为首先移动是xs和up是通用的（默认）。感谢您的提醒，我想我在上次迁移时确实略过了这一点，但在此问题上仍然停留在此上。

— blamb

1

安德烈一件事；只是被删除的“ xs”，还是还有其他？

— Funk Forty Niner，

2

请阅读以下答案，了解v3和v4之间的变化。）以及指向工具的链接（如果您决定采用这种方式）。这不是一件容易的事，恕我直言，使用干净的模板更容易，仅插入php而不是更改标记。

— 陶

21

我只是想知道，为什么col-xs-6对我不起作用，但是后来我在Bootstrap 4文档中找到了答案。额外的小型设备类的前缀是现在col-，而在之前的版本中，它是col-xs。

https://getbootstrap.com/docs/4.1/layout/grid/#grid-options

Bootstrap 4删除了所有col-xs-*类，请col-*改用。例如col-xs-6由取代col-6。

— 萨比尔·侯赛因
source

2

如果您想使用旧语法（或者不想重写每个模板），则可以执行此操作

@for $i from 1 through $grid-columns {
  @include media-breakpoint-up(xs) {
    .col-xs-#{$i} {
      @include make-col-ready();
      @include make-col($i);
    }
  }
}

— 维沃拉维达
source

2

他们之所以放弃XS，是因为Bootstrap被认为是移动优先的开发工具。它的默认值被视为xs，因此不需要定义。

— SMWalker
source

1

在Bootstrap 4.3中，col-xs- {value}替换为col- {value}

sm，md，lg，xl不变保持不变。

.col- {值}
.col-sm- {值}
.col-md- {值}
.col-lg- {值}
.col-xl- {值}

— 多吉·卡玛（Dorjee Karma）
source

-1

Bootstrap 4网格col-xs- *类。

在bootstrap 4中，不同的视图或相同的网格类别是不同的。

如果要使用.col-xs- *类。

因此，该类适用于移动视图。

要查看区别，您可以在下面尝试此代码并查看区别。然后，在您的代码中使用此类。

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-sm-4 col-xs-12">Hello!</div>
    <div class="col-lg-4 col-sm-4 col-xs-12">Hi!</div>
    <div class="col-lg-4 col-sm-4 col-xs-12">Hey!</div>
  </div>
</div>

— 巴尔蒂·帕尔马
source

col-xs在Bootstrap 4中删除

— Wariored

请看看它链接：bitdegree.org/learn/... * 20英寸％％20your％20code。

— bharti parmar