Css Bootstrap4，我需要根据断点在每行上设置不同的列数_Css_Sass_Flexbox_Bootstrap 4

Css Bootstrap4，我需要根据断点在每行上设置不同的列数

css sass bootstrap-4

Css Bootstrap4，我需要根据断点在每行上设置不同的列数,css,sass,flexbox,bootstrap-4,Css,Sass,Flexbox,Bootstrap 4,更新：好的，这比我想象的要简单得多，我只是将所有列移到一行，响应良好。谢谢大家。我使用Bootstrap4网格系统创建3行和列关于lg断点，我需要：第1行3列第二排4列cols 第三排4列。在md断点上我需要：第1行3列第二排3列冷却液第三排3列。在sm断点上我需要：第1行2列第二排2列cols 第三排2列 <div class="example-container"> <div class="example-row">

更新：好的，这比我想象的要简单得多，我只是将所有列移到一行，响应良好。谢谢大家。

我使用Bootstrap4网格系统创建3行和列

关于lg断点，我需要：
第1行3列
第二排4列cols
第三排4列。
在md断点上我需要：
第1行3列
第二排3列冷却液
第三排3列。
在sm断点上我需要：
第1行2列
第二排2列cols
第三排2列

<div class="example-container">
        <div class="example-row">
            <div class="example-content-main top">Main content</div>
            <div class="example-content-secondary top">Secondary content</div>
            <div class="example-content-third top">third content</div>
        </div>
        <div class="example-row">
            <div class="example-content-main">Main content</div>
            <div class="example-content-secondary">Secondary content</div>
            <div class="example-content-third">third content</div>
            <div class="example-content-fourth">fourth content</div>
        </div>
         <div class="example-row">
            <div class="example-content-main">Main content</div>
            <div class="example-content-secondary">Secondary content</div>
            <div class="example-content-third">third content</div>
            <div class="example-content-fourth">fourth content</div>
        </div>
       </div>

在lg屏幕上，它显示ok，就像这样：

 $grid-columns:      12;
 $grid-gutter-width: 30px;

 $grid-breakpoints: (
   xs: 0,
  sm: 320px,
   md: 510px,
   lg: 780px,
  xl: 1000px
 );

.example-container {
  @include make-container;
 }

.example-row {
  @include make-row;
}


//ROWS 1,2,3,4
 .example-content-main {
  background: gold;
  @include make-col-ready;

  @include media-breakpoint-up(md) {
     @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
  @include media-breakpoint-up(xl) {
    @include make-col(3);
  }

 &.top {
   background: gold;
   @include make-col-ready;

   @include media-breakpoint-up(md) {
     @include make-col(6);
   }
   @include media-breakpoint-up(lg) {
     @include make-col(4);
   }
   @include media-breakpoint-up(xl) {
     @include make-col(3);
   }
 }
}

.example-content-secondary {
 background: grey;
 @include make-col-ready;

 @include media-breakpoint-up(md) {
   @include make-col(6);
 }
 @include media-breakpoint-up(lg) {
   @include make-col(4);
 }
 @include media-breakpoint-up(xl) {
   @include make-col(3);
 }

 &.top {
   background: white;
   @include make-col-ready;

   @include media-breakpoint-up(md) {
     @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
     @include make-col(4);
  }
 @include media-breakpoint-up(xl) {
  @include make-col(3);
  }
 }
}

.example-content-third {
  background: yellow;
  @include make-col-ready;

@include media-breakpoint-up(md) {
  @include make-col(6);
}
@include media-breakpoint-up(lg) {
  @include make-col(4);
}
@include media-breakpoint-up(xl) {
  @include make-col(3);
}

&.top {
  background: grey;
  @include make-col-ready;

  @include media-breakpoint-up(md) {
  @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
  @include media-breakpoint-up(xl) {
  @include make-col(6);
  }
 }
}

.example-content-fourth {...}

在md屏幕上，我每行需要3列，因此我需要3行，每行3列，但我得到的是这样的图像：

尽管列位于不同的行上，但有没有办法使它们彼此粘住？

通过测试下一个代码，我们可以看到您在以下方面遇到了问题：

。使用xs的第一行（列数增加到18）

。使用md的第二行和第三行（列数增加到16）


分子编码器示例
你好，这是摩尔编码器帮西奥·伊扎里斯做的！
调整浏览器窗口的大小以查看效果
.col-xs-6.col-sm-4.col-lg-4
.col-xs-6.col-sm-4.col-lg-4
.col-xs-6.col-sm-4.col-lg-4
.col-xs-6.col-sm-4.col-lg-3
.col-xs-6.col-sm-4.col-lg-3
.col-xs-6.col-sm-4.col-lg-3
.col-xs-6.col-sm-4.col-lg-3
.col-xs-6.col-sm-4.col-lg-3
.col-xs-6.col-sm-4.col-lg-3
.col-xs-6.col-sm-4.col-lg-3
.col-xs-6.col-sm-4.col-lg-3

这是一行中的列数大于12和的情况

如果一行中放置的列超过12列，则每组额外的列将作为一个单元包装到新行上

这意味着您想要实现的无法实现

不，您根本没有使用Bootstrap 4网格系统。因为你没有使用任何引导类。嘿！你的问题很难理解？nd是什么？空白在哪里？“我使用Bottrap4混合来使用Breakpont”--我重复：不，你根本没有使用Bootstrap4网格系统。作为一名“计算机科学教师”，你至少应该能够理解我在第一次评论中所说的话。即使是学生也应该能够轻松理解这一点，而无需重复……为什么不使用cols而不是所有自定义SASS列？询问者要求使用Bootstrap 4解决方案，因此请更新您的示例。至少需要将

col-xs-

更改为

col-

。

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Molecoder's 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 this was done by Molecoder to help Theo Itzaris!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <div class="col-xs-6 col-sm-4 col-lg-4" style="background-color:red;">.col-xs-6 .col-sm-4 .col-lg-4</div>
    <div class="col-xs-6 col-sm-4 col-lg-4" style="background-color:lavender;">.col-xs-6 .col-sm-4 .col-lg-4</div>
    <div class="col-xs-6  col-sm-4 col-lg-4" style="background-color:purple;">.col-xs-6 .col-sm-4 .col-lg-4</div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-sm-4 col-lg-3" style="background-color:pink;">.col-xs-6 .col-sm-4 .col-lg-3</div>
    <div class="col-xs-6 col-sm-4 col-lg-3" style="background-color:black;">.col-xs-6 .col-sm-4 .col-lg-3</div>
    <div class="col-xs-6 col-sm-4 col-lg-3" style="background-color:lavenderblush;">.col-xs-6 .col-sm-4 .col-lg-3</div>
    <div class="col-xs-6 col-sm-4 col-lg-3" style="background-color:grey;">.col-xs-6 .col-sm-4 .col-lg-3</div>
  </div><div class="row">
    <div class="col-xs-6 col-sm-4 col-lg-3" style="background-color:orange;">.col-xs-6 .col-sm-4 .col-lg-3</div>
    <div class="col-xs-6 col-sm-4 col-lg-3" style="background-color:yellow;">.col-xs-6 .col-sm-4 .col-lg-3</div>
    <div class="col-xs-6 col-sm-4 col-lg-3" style="background-color:green;">.col-xs-6 .col-sm-4 .col-lg-3</div>
    <div class="col-xs-6 col-sm-4 col-lg-3" style="background-color:blue;">.col-xs-6 .col-sm-4 .col-lg-3</div>
  </div>
</div>

</body>
</html>