bootstrap 4中的三个相等的列答案

【问题标题】：Three Equal Columns in bootstrap 4bootstrap 4中的三个相等的列
【发布时间】：2018-05-30 20:15:01
【问题描述】：

当屏幕宽度小于768px 时，这些列将自动堆叠在一起。我想，比991px 宽但在bootstrap 4？

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
  <div class="row">
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
  </div>
</div>

</body>
</html>

【问题讨论】：

你使用引导程序 3！你想让这个代码适合版本 4???
是的。我在 bs4 中需要这个
你对scss满意吗，这很容易做到..

标签： css twitter-bootstrap

【解决方案1】：

只需将脚本更改为 bootstrap-4：

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

代码如下：

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
  <div class="row">
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
  </div>
</div>

使用媒体查询991px

jsFiddle：https://jsfiddle.net/9p3nws1h/

@media only screen and (min-width: 991px) {
     .col-sm-4{
        width:33.333333%!important;
    }
}

【讨论】：

告诉我更多帮助
我知道如何添加引导程序 4 :D 但我需要，当屏幕小于991px 宽时，这些列将自动堆叠在一起。（不是 768 像素）
告诉我它是否对你有帮助

【解决方案2】：

请阅读Bootstrap 4 Documentation。显示lg断点为992像素...

因此，标记很简单：

<div class="row">
     <div class="col-lg-4" style="background-color:lavender;">.col-lg-4</div>
     <div class="col-lg-4" style="background-color:lavenderblush;">.col-lg-4</div>
     <div class="col-lg-4" style="background-color:lavender;">.col-lg-4</div>
</div>

Working demo

【讨论】：

【解决方案3】：

有关网格断点的信息，请参阅引导文档中的网格选项部分。 https://getbootstrap.com/docs/4.0/layout/grid/#grid-options

您在代码中使用 col-sm-4 并且 sm 的断点是 540px。其他选项是

md 720 像素

lg 960 像素

xl 1140 像素

如果您想定义自己的断点，请编写您自己的媒体 CSS 查询。

【讨论】：

【解决方案4】：

In bootstrap 4, 991px resolution is not defined in media queries but then too if you want to add it, then you need to add it manually like this: 

Bootstrap provides 992px resolution which comes in ".col-lg-"

@media only screen (min-width:991px) {
  // Here comes your code
}

【讨论】：

【解决方案5】：

这不是引导程序，而是演示如何使用 CSS3 Flexbox 和单个 @media 查询直接实现所需效果。

工作示例：

.row {
display: flex;
flex-wrap: wrap;
}

.row div {
flex: 1 1 33%;
height: 100px;
}

.row div:nth-of-type(1) {
background-color: lavender;
}

.row div:nth-of-type(2) {
background-color: lavenderblush;
}

.row div:nth-of-type(3) {
background-color: lavender;
}

@media only screen and (max-width: 991px) {

.row div {
flex: 0 0 100%;
}

}

<main>
<p>The columns will automatically stack on top of each other when the screen is less than 991px wide.</p>

<div class="row">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
</div>

</main>

【讨论】：