Bootstrap 4 处的自定义和响应式网格宽度

Question

我的代码如下：

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

  <style>
    .col-lg-3.custom {
      flex: 0 0 20%;
      max-width: 20%;
    }
    
    .col-lg-6.custom {
      flex: 0 0 55%;
      max-width: 55%;
    }
  </style>
</head>

<body>

  <div class="row">
    <div class="col-lg-3 custom" style="background: red;">1</div>
    <div class="col-lg-6 custom" style="background: rgb(0, 255, 255);">2</div>
    <div class="col-lg-3" style="background: green;">3</div>
  </div>

</body>

</html>

我在这里想要的是让第一列更小一些。对于第一列，col-lg-3 太宽而 col-lg-2 太窄。出于这个原因，我添加了自定义样式。它实际上适用于宽屏。

但是在移动端，它失去了响应能力，变成了下图。

我想在手机上做成如下：

注意：我发现了一些关于这个问题的问题，但我想答案是针对 Bootstrap 3 的，因为它们对我不起作用。

Answer 1

您正在使用 bootstrap，因此您可以在移动设备上使用 col-12。为此，您还需要设置 col-xl col-lg col-md 和 col-sm。 此外，您已将 .custom class 添加到您的 div 中。这就是为什么你的 div 在所有屏幕尺寸中总是采用 class 中添加的宽度。

您也可以使用自己的媒体查询，如下所示：

@media (min-width: 992px) {
  .col-lg-2half {
    -ms-flex: 0 0 20% !important;
    flex: 0 0 20% !important;
    max-width: 20% !important;
    }
  .col-lg-6half {
    -ms-flex: 0 0 55% !important;
    flex: 0 0 55% !important;
    max-width: 55% !important;
    }
}

Answer 2

你能检查一下下面的代码吗？希望它对你有用。如果您想要移动设备上所有块的 100% 宽度，您可以应用相同的媒体查询。

请参考这个link： https://jsfiddle.net/yudizsolutions/apf0hrn7/

 .col-md-3.custom {
   flex: 0 0 20%;
   max-width: 20%;
 }

 .col-md-6.custom {
   flex: 0 0 55%;
   max-width: 55%;
 }

 @media (max-width:767px) {
   .col-12.custom {
     max-width: 100%;
     flex: 0 0 100%;
   }
 }

<html>

  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

  </head>

  <body>

    <div class="row">
      <div class="col-md-3 custom col-12" style="background: red;">1</div>
      <div class="col-md-6 custom col-12" style="background: rgb(0, 255, 255);">2</div>
      <div class="col-md-3" style="background: green;">3</div>
    </div>


  </body>

</html>

Bootstrap 4 处的自定义和响应式网格宽度

Custom and Responsive Grid Width at Bootstrap 4

html

css

bootstrap-4

bootstrap-grid