Question

任何人都可以向我解释Bootstrap 4中的网格系统col-xs，Bootstrap 4仍然是alpha版本吗？我应该在我的大项目中开始使用Bootstrap 4吗？它的未来更新能否在我的项目中产生任何问题？

Answer 1

Bootstrap-4稳定，最新版本为4.1.1。 Bootstrap删除了*-xs-*类的所有变体。将col-*用于移动设备。

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container">
  <div class="row text-center">
    <div class="col-12 col-sm-3 p-5 bg-primary">Column 1</div>
    <div class="col-12 col-sm-3 p-5 bg-success">Column 2</div>
    <div class="col-12 col-sm-3 p-5 bg-danger">Column 3</div>
    <div class="col-12 col-sm-3 p-5 bg-info">Column 4</div>
  </div>
</div>

Answer 2

Bootstrap 4版本4.4.0网格

网格用于查看每个设备上的内容或页面响应。我们可以在更短的时间内使响应式网站轻松获得不同的视图港口。最近，我正在使用bootstrap 4版本4.4.0

.row类在此处将行划分为否。您想要的列数行。

.col- *类适用于所有视图。但是，有时候我们想要不同的外观在任何特定内容的不同设备上。然后，我们必须使用以下类别，我们可以对所有个人相同地使用设备。

.col-xl- *类用于超大型设备，例如大型电视和桌面。

.col-lg- *类用于笔记本电脑，ipad pro和普通台式机。

.col-md- *类用于ipad等中型设备。

.col-sm- *类用于小型设备，例如：Galaxy，iphone 6/7/8 加。

.col-xs- *类用于超小型设备，例如：iphone 5/6。

<div class="container">
      <div class="row">
        <div class="col-xl-4 col-lg-4 col-sm-4 col-xs-12">
          <ul class="list-inline">
            <li class="list-inline-item">Home</li>
            <li class="list-inline-item">Products</li>
            <li class="list-inline-item">About Us</li>
          </ul>
        </div>
        <div class="col-xl-4 col-lg-4 col-sm-4 col-xs-12">
          <ul class="list-inline">
            <li class="list-inline-item">Home</li>
            <li class="list-inline-item">Products</li>
            <li class="list-inline-item">About Us</li>
          </ul>
        </div>
        <div class="col-xl-4 col-lg-4 col-sm-4 col-xs-12">
          <ul class="list-inline">
            <li class="list-inline-item">Home</li>
            <li class="list-inline-item">Products</li>
            <li class="list-inline-item">About Us</li>
          </ul>
        </div>
      </div>
       <div class="row">
         <div class="col-xl-4 col-lg-4 col-sm-4 col-xs-12">
          <ul class="list-inline">
            <li class="list-inline-item">Home</li>
            <li class="list-inline-item">Products</li>
            <li class="list-inline-item">About Us</li>
          </ul>
        </div>
         <div class="col-xl-4 col-lg-4 col-sm-4 col-xs-12">
          <ul class="list-inline">
            <li class="list-inline-item">Home</li>
            <li class="list-inline-item">Products</li>
            <li class="list-inline-item">About Us</li>
          </ul>
        </div>
         <div class="col-xl-4 col-lg-4 col-sm-4 col-xs-12">
          <ul class="list-inline">
            <li class="list-inline-item">Home</li>
            <li class="list-inline-item">Products</li>
            <li class="list-inline-item">About Us</li>
          </ul>
        </div>
      </div>
    <div>

Bootstrap 4网格

2 个答案:

Bootstrap 4版本4.4.0网格