css - 如何在 bootstrap 4 中使用 flexbox 的自动宽度列？

问题描述

我只是想从 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。我希望它会包含在预编译版本中。

我想念什么？

标签： cssdjangobootstrap-4flexbox

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>

css - 如何在 bootstrap 4 中使用 flexbox 的自动宽度列？

问题描述

解决方案

推荐阅读