Question

更新：好的，它比我想象的要简单得多，我只是把所有列都移到了一行，而且响应很好。谢谢大家。

我正在使用Bootstrap4网格系统创建包含列的3行。

在lg断点上我需要：
第1行3列
第2排4门第3行4列 我需要md断点：
第1行3列
第2排3列第3行3列。
我需要的sm断点：
第1排2列
第2排2列第3排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>

更新 好吧，我使用botstrap4混合来使用我的breakponts，这是我的自定义scss ：

 $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 {...}

在lg屏幕上显示确定，如此：

在md屏幕上，我需要每行3列，所以我需要3行，每行3列，但我得到这个图像：

有没有办法让列彼此卡在一起但是它们在不同的行上？

Answer 1

通过测试下一个代码，我们可以看到你偶然发现了一个问题：

。第一行使用xs（列数最多为18）;

。第二行和第三行使用md（列数最多为16）。

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

Test it here

这是一行中列数超过12且Bootstrap's grid system allows up to 12 columns across the page的情况。

From their documentation

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

这意味着你想要实现的目标无法完成。

Bootstrap4，我需要每行不同的列号，具体取决于断点

1 个答案: