Question

当屏幕宽度小于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>

Answer 1

只需改写自助训练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;
    }
}

Answer 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

Answer 3

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

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

md ，720px

lg at 960px

xl 1140px

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

Answer 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
}

Answer 5

这不是引导程序，但它演示了使用CSS3 Flexbox和单个@media查询可以直接达到预期效果。

工作示例：

＆＃13;

.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%;
}

}

＆＃13;

<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>

＆＃13;

引导程序中的三个相等列4

5 个答案: