如何在 bootstrap 4 中使用 flexbox 的自动宽度列？
Posted
技术标签:
【中文标题】如何在 bootstrap 4 中使用 flexbox 的自动宽度列？【英文标题】：How can I use flexbox' auto-width columns in bootstrap 4? 【发布时间】：2021-07-08 05:44:10 【问题描述】：我只是想从 bootstrap 3 转移到 bootstrap 4，以便通过 flexbox 连续获得相同大小的 div。我从https://getbootstrap.com/docs/4.6/getting-started/download/下载了预编译文件。
然后我将它们放在我的静态文件夹中并在我的 django 项目上运行 manage.py collectstatic。我将它们作为链接包含在我的文件中。
渲染的 html 看起来像这样（我只是为了便于阅读而减少了它）：
<!DOCTYPE html>
<script>window.jQuery || document.write('<script src="http://code.jquery.com/jquery-3.5.1.min.js"><\/script>')</script>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>My project</title>
<link rel="stylesheet" href="/static/boot/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/boot/css/bootstrap.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<nav aria-label="breadcrumb" class="nav navbar-nav navbar-left">
<ul class="breadcrumb">
<li class="active">Dashboard</li>
</ul>
</nav>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-sm-offset-0 col-md-12 col-md-offset-0 main">
<h2>My Dashboard</h2>
<br>
<div class="container-fluid">
<div class="row">
<div class="col">
<h4>My bills</h4>
<div id="hccontainer_medabr" style="height:200px;"></div>
</div>
<div class="col">
<h4>My brother's bills</h4>
<div id="hccontainer_medjan" style="height:200px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/static/highcharts/highcharts.src.js"></script>
<script type="text/javascript" src="/static/highcharts/modules/bullet.src.js"></script>
<script type="text/javascript" src="/static/highcharts/highcharts-more.js"></script>
<script type="text/javascript" src="/static/highcharts/modules/solid-gauge.js"></script>
<script>
Highcharts.chart('hccontainer_medabr', "chart": "displayErrors": true, "type": "solidgauge", "renderTo": "hccontainer_medabr", "plotBorderWidth": 0, "title": false, "pane": "center": ["50%", "85%"], "size": "130%", "startAngle": -90, "endAngle": 90, "background": "backgroundcolor": "Highcharts.defaultOptions.legend.backgroundColor || '#EE'", "innerRadius": "60%", "outerRadius": "100%", "shape": "arc", "exporting": "enabled": false, "tooltip": "enabled": true, "yAxis": "stops": [[0.2, "#55BF3B"], [0.5, "#DDDF0D"], [0.8, "#DF5353"]], "min": 0, "max": 1500, "lineWidth": 0, "tickWidth": 0, "minorTickInterval": "null", "tickAmount": 2, "title": "y": 40, "text": "Nicht eingereicht", "labels": "y": 16, "credits": "enabled": false, "plotOptions": "solidgauge": "dataLabels": "useHTML": true, "borderWidth": 0, "y": 6, "series": ["name": "Serie: noch nicht eingereicht", "data": [1664.54], "dataLabels": "format": "<div style=\"text-align:center\"><span style=\"font-size:20px\">y</span><br/><span style=\"font-size:12px;opacity:0.4\">\u20ac</span></div>", "tooltip": "valueSuffix": " \u20ac"]);
Highcharts.chart('hccontainer_medjan', "chart": "displayErrors": true, "type": "solidgauge", "renderTo": "hccontainer_medabr", "plotBorderWidth": 0, "title": false, "pane": "center": ["50%", "85%"], "size": "130%", "startAngle": -90, "endAngle": 90, "background": "backgroundcolor": "Highcharts.defaultOptions.legend.backgroundColor || '#EE'", "innerRadius": "60%", "outerRadius": "100%", "shape": "arc", "exporting": "enabled": false, "tooltip": "enabled": true, "yAxis": "stops": [[0.2, "#55BF3B"], [0.5, "#DDDF0D"], [0.8, "#DF5353"]], "min": 0, "max": 1500, "lineWidth": 0, "tickWidth": 0, "minorTickInterval": "null", "tickAmount": 2, "title": "y": 40, "text": "Nicht eingereicht", "labels": "y": 16, "credits": "enabled": false, "plotOptions": "solidgauge": "dataLabels": "useHTML": true, "borderWidth": 0, "y": 6, "series": ["name": "Serie: noch nicht eingereicht", "data": [106.55], "dataLabels": "format": "<div style=\"text-align:center\"><span style=\"font-size:20px\">y</span><br/><span style=\"font-size:12px;opacity:0.4\">\u20ac</span></div>", "tooltip": "valueSuffix": " \u20ac"]);
</script>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script>window.jQuery || document.write('<script src="http://code.jquery.com/jquery-3.5.1.min.js"><\/script>')</script>
<script>window.jQuery || document.write('<script src="/static/boot/js/jquery.min.js"><\/script>')</script>
</body>
</html>
当我使用诸如“col-md-3”之类的类时，我会得到带有仪表的 div，但如果我只使用“col”，它们中的每一个都会占据一行，并且它们被放置在下面彼此。正如我所说，我为你减少了代码。实际上我想在这一行放置五个仪表，但我不知道如何启用 flexbox 的自动调整，或者我是否必须启用 flexbox。我希望它会包含在预编译版本中。
我错过了什么？
【问题讨论】：
你试过col-auto吗？
【参考方案1】：
Bootstrap 是移动优先的。因此需要为更大或更小的显示器添加不同的类：
<div class="row">
<div class="col-lg-6 col-md-6">
<h4>My bills</h4>
<div id="hccontainer_medabr" style="height:200px;"></div>
</div>
<div class="col-lg-6 col-md-6">
<h4>My brother's bills</h4>
<div id="hccontainer_medjan" style="height:200px;"></div>
</div>
</div>
更新：
这取决于您使用的版本。也许您使用的是过时的版本。所以我制作了适用的版本：
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-sm-offset-0 col-md-12 col-md-offset-0 main">
<h2>My Dashboard</h2>
<br>
<div class="container-fluid">
<div class="container">
<div class="row text-white">
<div class="col border bg-primary">Column 1</div>
<div class="col border bg-primary">Column 2</div>
<div class="col border bg-primary">Column 3</div>
<div class="col border bg-primary">Column 4</div>
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- <link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js">
</script> -->
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>【讨论】：
嗨 StepUp 谢谢，但我想使用此处提到的自动调整：getbootstrap.com/docs/4.0/layout/grid/#auto-layout-columns 我对 -lg-6 等后缀的问题是我想抛出一定数量的 div（不是一定可以从 12) 中除以它们，它们会自动调整它们的大小/宽度。 我今天早上刚拿到最新版本。唔。会不会，因为我像这个 container-fluid -> row -> col 一样将它封闭起来，而你在没有流体的情况下使用它？ @MDoe 不，它不能依赖于container-fluid。请看我更新的例子。它完美地工作。您可以尝试做什么： 1. 像我的示例中那样放置 script 和 link 标签 2. 尝试使用我的示例中的 script 和 links
@MDoe 随时提出任何问题。如果回复对您有帮助，您可以将其标记为答案，以简化其他用户未来的搜索。 How accepting of answer works.
感谢大家。不知何故，我让它工作了，但不幸的是我错过了之前出错的地方。否则我会分享的。【参考方案2】：
这个问题可以通过引导 col-md-6 类来解决，它会自动赋予各种设备的灵活性。
<!DOCTYPE html>
<script>window.jQuery || document.write('<script src="http://code.jquery.com/jquery-3.5.1.min.js"><\/script>')</script>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>My project</title>
<link rel="stylesheet" href="/static/boot/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/boot/css/bootstrap.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<nav aria-label="breadcrumb" class="nav navbar-nav navbar-left">
<ul class="breadcrumb">
<li class="active">Dashboard</li>
</ul>
</nav>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-sm-offset-0 col-md-12 col-md-offset-0 main">
<h2>My Dashboard</h2>
<br>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6">
<h4>My bills</h4>
<div id="hccontainer_medabr" style="height:200px;"></div>
</div>
<div class="col-lg-6 col-md-6">
<h4>My brother's bills</h4>
<div id="hccontainer_medjan" style="height:200px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
Highcharts.chart('hccontainer_medabr', "chart": "displayErrors": true, "type": "solidgauge", "renderTo": "hccontainer_medabr", "plotBorderWidth": 0, "title": false, "pane": "center": ["50%", "85%"], "size": "130%", "startAngle": -90, "endAngle": 90, "background": "backgroundcolor": "Highcharts.defaultOptions.legend.backgroundColor || '#EE'", "innerRadius": "60%", "outerRadius": "100%", "shape": "arc", "exporting": "enabled": false, "tooltip": "enabled": true, "yAxis": "stops": [[0.2, "#55BF3B"], [0.5, "#DDDF0D"], [0.8, "#DF5353"]], "min": 0, "max": 1500, "lineWidth": 0, "tickWidth": 0, "minorTickInterval": "null", "tickAmount": 2, "title": "y": 40, "text": "Nicht eingereicht", "labels": "y": 16, "credits": "enabled": false, "plotOptions": "solidgauge": "dataLabels": "useHTML": true, "borderWidth": 0, "y": 6, "series": ["name": "Serie: noch nicht eingereicht", "data": [1664.54], "dataLabels": "format": "<div style=\"text-align:center\"><span style=\"font-size:20px\">y</span><br/><span style=\"font-size:12px;opacity:0.4\">\u20ac</span></div>", "tooltip": "valueSuffix": " \u20ac"]);
Highcharts.chart('hccontainer_medjan', "chart": "displayErrors": true, "type": "solidgauge", "renderTo": "hccontainer_medabr", "plotBorderWidth": 0, "title": false, "pane": "center": ["50%", "85%"], "size": "130%", "startAngle": -90, "endAngle": 90, "background": "backgroundcolor": "Highcharts.defaultOptions.legend.backgroundColor || '#EE'", "innerRadius": "60%", "outerRadius": "100%", "shape": "arc", "exporting": "enabled": false, "tooltip": "enabled": true, "yAxis": "stops": [[0.2, "#55BF3B"], [0.5, "#DDDF0D"], [0.8, "#DF5353"]], "min": 0, "max": 1500, "lineWidth": 0, "tickWidth": 0, "minorTickInterval": "null", "tickAmount": 2, "title": "y": 40, "text": "Nicht eingereicht", "labels": "y": 16, "credits": "enabled": false, "plotOptions": "solidgauge": "dataLabels": "useHTML": true, "borderWidth": 0, "y": 6, "series": ["name": "Serie: noch nicht eingereicht", "data": [106.55], "dataLabels": "format": "<div style=\"text-align:center\"><span style=\"font-size:20px\">y</span><br/><span style=\"font-size:12px;opacity:0.4\">\u20ac</span></div>", "tooltip": "valueSuffix": " \u20ac"]);
</script>
<script type="text/javascript" src="/static/highcharts/highcharts.src.js"></script>
<script type="text/javascript" src="/static/highcharts/modules/bullet.src.js"></script>
<script type="text/javascript" src="/static/highcharts/highcharts-more.js"></script>
<script type="text/javascript" src="/static/highcharts/modules/solid-gauge.js"></script>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script>window.jQuery || document.write('<script src="http://code.jquery.com/jquery-3.5.1.min.js"><\/script>')</script>
<script>window.jQuery || document.write('<script src="/static/boot/js/jquery.min.js"><\/script>')</script>
</body>
</html>【讨论】：
以上是关于如何在 bootstrap 4 中使用 flexbox 的自动宽度列？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Angular 中使用带有 SASS 的 Bootstrap 4
如何在 Bootstrap 4 中使用 Font Awesome 中的 svg 图标？
如何在 HTML/Bootstrap 4 中使用变量作为选择器？
如何在 ASP.NET Core 中使用 Bootstrap 4