如何在响应期间使用引导程序更改宽度？答案

【问题标题】：how to change width using bootstrap during responsiveness?如何在响应期间使用引导程序更改宽度？
【发布时间】：2018-09-14 15:38:25
【问题描述】：

我正在尝试在响应期间更改 div 元素的宽度。所以当我将屏幕宽度减小到 600px 左右时，div 元素的宽度应该增加到 50%。

现在我注意到 w-* 类没有断点，想知道有什么办法吗？？

我也可以只使用引导程序，并尽可能避免添加我自己的 CSS。

谁能帮忙？？

这里是代码sn-p

<!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/4.1.3/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.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <style>
  .d-flex>div
  {
  height:200px;
  background-color:black;
  margin-left:10px;
}
</style>
</head>
<body>

<div class="container-fluid">
                        <div class="card bg-light">
                            <div class="card-body d-flex align-items-center flex-wrap">
                                <div class="flex-grow-1">
                                </div>
                                <div class="flex-grow-1 ">
                                </div>
                                <div class="flex-grow-1 ">
                                </div>
                                <div class="flex-grow-1 ">
                                </div>
                                <div class="flex-grow-1 ">
                                </div>
                            </div>
                        </div>
</div>
</body>
</html>

【问题讨论】：

手动创建媒体查询。在某些情况下，您不能完全依赖 Bootstrap。
谢谢，但我是为了避免添加自己的查询，没有其他办法吗？？
有一件事，你可以使用Bootstrap的网格系统，因为你已经在使用Boostrap了。但似乎你需要自己做，因为你想将 div 的宽度设置为 50% 和 600px 的断点，并且覆盖或更改引导程序的 css 文件中的代码有点混乱，因为它在更改中有默认断点一列的宽度（1199 像素、991 像素、768 像素、480 像素），而您的宽度希望为 600 像素。如果你自己做就容易多了。
嗯...那真的会弄乱我的结构。

标签： html bootstrap-4

【解决方案1】：

你可以用下面的 jquery 代码来做到这一点，

if(jQuery(window).width() < 601px){
    jQuery('.your-div-class').addClass('w-50');
}
else {
    jQuery('.your-div-class').removeClass('w-50');
}

请确保您的页面中也包含 jquery。

【讨论】：

对不起伙计，不能使用 jquery 或 javascript，我不允许这样做。
尽量避免。
你应该从 600px 添加一个自定义断点，因为这是实现这一点的最简单和最有效的方法。

【解决方案2】：

Bootstrap 的断点是 Small 540px 和 Medium 720px。因此，您可以尝试以下方法。此示例默认为每行 5 个块，然后在一个小断点上每行 2 个块。：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!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/4.1.3/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.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <style>
    .d-flex {
      height: 200px;
      background-color: black;
      border: 1px solid yellow;
    }
  </style>
</head>

<body>

  <div class="container-fluid">
    <div class="card bg-light">
      <div class="card-body row">
        <div class="d-flex col-6 col-sm-2">
        </div>
        <div class="d-flex col-6 col-sm-2">
        </div>
        <div class="d-flex col-6 col-sm-2">
        </div>
        <div class="d-flex col-6 col-sm-2">
        </div>
        <div class="d-flex col-6 col-sm-2">
        </div>
      </div>
    </div>
  </div>
</body>

</html>

【讨论】：

有用但没用，代码效率不是很高。但我明白它的逻辑。