问题描述
我的代码如下：
<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，因为它们对我不起作用。
解决方法
你能看看下面的代码吗？希望它对你有用。如果您想要移动设备上所有块的 100% 宽度，您可以对其应用媒体查询。
请参考此链接： 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>您正在使用引导程序，因此您可以将 col-12 用于移动设备。您还需要为此设置 col-xl col-lg col-md 和 col-sm。 此外，您的 div 添加了 .custom 类。这就是为什么您的 div 在所有屏幕尺寸中始终采用该类中添加的宽度。
您也可以使用自己的媒体查询，如下所示：
@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;
}
}