Bootstrap 4响应式侧边栏菜单窗口调整大小

Question

在尝试为小型设备调整窗口大小时，我试图将左侧边栏变成一个小图标（=更多设置）。

问题：

这是我的代码，当您将窗口的大小调整为大约中等时，您会看到两列的重叠。如何保持简单并尽可能使用引导程序4修复此重叠？如果我参加了navbar课并崩溃了，那就没有重叠了。谢谢您的帮助。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>


<div class="row no-gutters" style="margin-left: 15px;margin-right: 15px;">
        <div class="col-sm-2">
            <nav class="navbar navbar-expand-lg navbar-expand-md navbar-expand-sm">
                <button id="filter_control" class="navbar-toggler" data-target="#filter_container3" data-toggle="collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <p><i class="fas fa-sliders-h" style="padding-right:5px;"></i>=More Settings&nbsp;</p>
                </button>
            <!--collapse for filter and flex-column to make narrow column-->
                <div id="filter_container3" class="collapse navbar-collapse" style="margin-top:50px;">
    
                    <div class="list-group text-secondary">
                        <a class="list-group-item list-group-item-action" href="404.html"><span>Account</span></a>
                        <a class="list-group-item list-group-item-action" href="account.html"><span>Subject</span></a>
                        <a class="list-group-item list-group-item-action"><span>Class</span></a>
                        <a class="list-group-item list-group-item-action"><span>Schedule</span></a>
                        <a class="list-group-item list-group-item-action"><span>Log</span></a>
                        <a class="list-group-item list-group-item-action"><span>Billing</span></a>
                    </div>
                </div>
            </nav>
        </div>
    
    
    <!--mid col-->
        <div class="col-12 col-sm-10">
            <div class="row no-gutters" style="margin-top:25px;">
                <div class="col-12 col-sm-6 col-md-3 justify-content-sm-center justify-content-lg-center" style="margin: 0px;margin-top: 0px;padding: 10px;">
                    <div class="card bg-success">
                        <div class="card-header" style="padding-right: 10px;padding-bottom: 10px;padding-top: 10px;padding-left: 10px;">
                            <h6 class="text-truncate text-center text-white">Appt</h6>
                        </div>
                        <div class="card-body" style="padding: 12px;">
                            <div class="row no-gutters">
                                <div class="col" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-truncate text-white">Coming</h5>
                                </div>
                                <div class="col text-right" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-white"><i class="far fa-calendar-check" style="opacity: 1;"></i></h5>
                                </div>
                            </div>
                            <div class="row no-gutters text-right">
                                <div class="col">
                                    <h5 class="text-white">4</h5>
                                </div>
                            </div><a href="#" class="card-link">Link</a></div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 justify-content-sm-center justify-content-lg-center" style="margin: 0px;margin-top: 0px;padding: 10px;">
                    <div class="card bg-primary">
                        <div class="card-header" style="padding-right: 10px;padding-bottom: 10px;padding-top: 10px;padding-left: 10px;">
                            <h6 class="text-truncate text-center text-white">Messages</h6>
                        </div>
                        <div class="card-body" style="padding: 12px;margin: 0px;">
                            <div class="row no-gutters">
                                <div class="col" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-truncate text-white">New</h5>
                                </div>
                                <div class="col text-right" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-white"><i class="far fa-comment"></i></h5>
                                </div>
                            </div>
                            <div class="row no-gutters text-right">
                                <div class="col">
                                    <h5 class="text-white">2</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 justify-content-sm-center justify-content-lg-center" style="margin: 0px;margin-top: 0px;padding: 10px;">
                    <div class="card bg-warning">
                        <div class="card-header" style="padding-right: 10px;padding-bottom: 10px;padding-top: 10px;padding-left: 10px;">
                            <h6 class="text-truncate text-center text-white">Log</h6>
                        </div>
                        <div class="card-body" style="opacity: 1;padding: 12px;">
                            <div class="row no-gutters">
                                <div class="col" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-truncate text-white">Hours</h5>
                                </div>
                                <div class="col text-right" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-white">4 <i class="far fa-clock"></i></h5>
                                </div>
                            </div>
                            <div class="row no-gutters">
                                <div class="col">
                                    <h4 class="text-right text-white"></h4>
                                </div>
                                <div class="col">
                                    <h5 class="text-right text-white">50</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 justify-content-sm-center justify-content-lg-center" style="margin: 0px;margin-top: 0px;padding: 10px;">
                    <div class="card bg-info">
                        <div class="card-header" style="padding-right: 10px;padding-bottom: 10px;padding-top: 10px;padding-left: 10px;">
                            <h6 class="text-truncate text-center text-white">Reviews</h6>
                        </div>
                        <div class="card-body" style="padding: 12px;">
                            <div class="row no-gutters">
                                <div class="col" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-truncate text-white">Total</h5>
                                </div>
                                <div class="col text-right" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-white">3.5 <i class="fa fa-star"></i></h5>
                                </div>
                            </div>
                            <div class="row no-gutters text-right">
                                <div class="col">
                                    <h5 class="text-white">145 Reviews</h5>
                                </div>
                            </div><a href="#" class="card-link">Link</a></div>
                    </div>
                </div>
            </div>
            <div class="row no-gutters">
                <div class="col">
                    <div>
                        <form></form>
                    </div>
                </div>
                <div class="col"></div>
            </div>
        </div>
    </div>

Answer 1

问题是内容大于父列，因此您只需调整字体大小，填充或两者，就可以在媒体查询中以所需的宽度添加它。您可以尝试执行以下操作：

nav .list-group-item {font-size:12px;padding:.75rem .75rem;}

应该可以解决问题。如果只是出于外观目的，我也将.list-group和.list-group-item的宽度设为100％。没必要，我只是认为它看起来更好并且认为我会建议这样做：

nav .list-group{width:100%;}
nav .list-group-item {width:100%;font-size:12px;padding:.75rem .75rem;}

以下是您更新后的代码段：

nav .list-group{width:100%;}
nav .list-group-item {width:100%;font-size:12px;padding:.75rem .75rem;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>


<div class="row no-gutters" style="margin-left: 15px;margin-right: 15px;">
        <div class="col-sm-2">
            <nav class="navbar navbar-expand-lg navbar-expand-md navbar-expand-sm">
                <button id="filter_control" class="navbar-toggler" data-target="#filter_container3" data-toggle="collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <p><i class="fas fa-sliders-h" style="padding-right:5px;"></i>=More Settings&nbsp;</p>
                </button>
            <!--collapse for filter and flex-column to make narrow column-->
                <div id="filter_container3" class="collapse navbar-collapse" style="margin-top:50px;">
    
                    <div class="list-group text-secondary">
                        <a class="list-group-item list-group-item-action" href="404.html"><span>Account</span></a>
                        <a class="list-group-item list-group-item-action" href="account.html"><span>Subject</span></a>
                        <a class="list-group-item list-group-item-action"><span>Class</span></a>
                        <a class="list-group-item list-group-item-action"><span>Schedule</span></a>
                        <a class="list-group-item list-group-item-action"><span>Log</span></a>
                        <a class="list-group-item list-group-item-action"><span>Billing</span></a>
                    </div>
                </div>
            </nav>
        </div>
    
    
    <!--mid col-->
        <div class="col-12 col-sm-10">
            <div class="row no-gutters" style="margin-top:25px;">
                <div class="col-12 col-sm-6 col-md-3 justify-content-sm-center justify-content-lg-center" style="margin: 0px;margin-top: 0px;padding: 10px;">
                    <div class="card bg-success">
                        <div class="card-header" style="padding-right: 10px;padding-bottom: 10px;padding-top: 10px;padding-left: 10px;">
                            <h6 class="text-truncate text-center text-white">Appt</h6>
                        </div>
                        <div class="card-body" style="padding: 12px;">
                            <div class="row no-gutters">
                                <div class="col" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-truncate text-white">Coming</h5>
                                </div>
                                <div class="col text-right" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-white"><i class="far fa-calendar-check" style="opacity: 1;"></i></h5>
                                </div>
                            </div>
                            <div class="row no-gutters text-right">
                                <div class="col">
                                    <h5 class="text-white">4</h5>
                                </div>
                            </div><a href="#" class="card-link">Link</a></div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 justify-content-sm-center justify-content-lg-center" style="margin: 0px;margin-top: 0px;padding: 10px;">
                    <div class="card bg-primary">
                        <div class="card-header" style="padding-right: 10px;padding-bottom: 10px;padding-top: 10px;padding-left: 10px;">
                            <h6 class="text-truncate text-center text-white">Messages</h6>
                        </div>
                        <div class="card-body" style="padding: 12px;margin: 0px;">
                            <div class="row no-gutters">
                                <div class="col" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-truncate text-white">New</h5>
                                </div>
                                <div class="col text-right" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-white"><i class="far fa-comment"></i></h5>
                                </div>
                            </div>
                            <div class="row no-gutters text-right">
                                <div class="col">
                                    <h5 class="text-white">2</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 justify-content-sm-center justify-content-lg-center" style="margin: 0px;margin-top: 0px;padding: 10px;">
                    <div class="card bg-warning">
                        <div class="card-header" style="padding-right: 10px;padding-bottom: 10px;padding-top: 10px;padding-left: 10px;">
                            <h6 class="text-truncate text-center text-white">Log</h6>
                        </div>
                        <div class="card-body" style="opacity: 1;padding: 12px;">
                            <div class="row no-gutters">
                                <div class="col" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-truncate text-white">Hours</h5>
                                </div>
                                <div class="col text-right" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-white">4 <i class="far fa-clock"></i></h5>
                                </div>
                            </div>
                            <div class="row no-gutters">
                                <div class="col">
                                    <h4 class="text-right text-white"></h4>
                                </div>
                                <div class="col">
                                    <h5 class="text-right text-white">50</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 justify-content-sm-center justify-content-lg-center" style="margin: 0px;margin-top: 0px;padding: 10px;">
                    <div class="card bg-info">
                        <div class="card-header" style="padding-right: 10px;padding-bottom: 10px;padding-top: 10px;padding-left: 10px;">
                            <h6 class="text-truncate text-center text-white">Reviews</h6>
                        </div>
                        <div class="card-body" style="padding: 12px;">
                            <div class="row no-gutters">
                                <div class="col" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-truncate text-white">Total</h5>
                                </div>
                                <div class="col text-right" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-white">3.5 <i class="fa fa-star"></i></h5>
                                </div>
                            </div>
                            <div class="row no-gutters text-right">
                                <div class="col">
                                    <h5 class="text-white">145 Reviews</h5>
                                </div>
                            </div><a href="#" class="card-link">Link</a></div>
                    </div>
                </div>
            </div>
            <div class="row no-gutters">
                <div class="col">
                    <div>
                        <form></form>
                    </div>
                </div>
                <div class="col"></div>
            </div>
        </div>
    </div>

您还可以在较小的屏幕尺寸上添加不同的宽度，因此，不仅仅拥有col-sm-2和col-sm-10主列，还可以将它们设为col-md-2 col-sm-3和col-md-10 col-sm-9

这是具有此更改的更新的代码段：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>



<div class="row no-gutters" style="margin-left: 15px;margin-right: 15px;">
        <div class="col-md-2 col-sm-3">
            <nav class="navbar navbar-expand-lg navbar-expand-md navbar-expand-sm">
                <button id="filter_control" class="navbar-toggler" data-target="#filter_container3" data-toggle="collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <p><i class="fas fa-sliders-h" style="padding-right:5px;"></i>=More Settings&nbsp;</p>
                </button>
            <!--collapse for filter and flex-column to make narrow column-->
                <div id="filter_container3" class="collapse navbar-collapse" style="margin-top:50px;">
    
                    <div class="list-group text-secondary">
                        <a class="list-group-item list-group-item-action" href="404.html"><span>Account</span></a>
                        <a class="list-group-item list-group-item-action" href="account.html"><span>Subject</span></a>
                        <a class="list-group-item list-group-item-action"><span>Class</span></a>
                        <a class="list-group-item list-group-item-action"><span>Schedule</span></a>
                        <a class="list-group-item list-group-item-action"><span>Log</span></a>
                        <a class="list-group-item list-group-item-action"><span>Billing</span></a>
                    </div>
                </div>
            </nav>
        </div>
    
    
    <!--mid col-->
        <div class="col-12 col-md-10 col-sm-9">
            <div class="row no-gutters" style="margin-top:25px;">
                <div class="col-12 col-sm-6 col-md-3 justify-content-sm-center justify-content-lg-center" style="margin: 0px;margin-top: 0px;padding: 10px;">
                    <div class="card bg-success">
                        <div class="card-header" style="padding-right: 10px;padding-bottom: 10px;padding-top: 10px;padding-left: 10px;">
                            <h6 class="text-truncate text-center text-white">Appt</h6>
                        </div>
                        <div class="card-body" style="padding: 12px;">
                            <div class="row no-gutters">
                                <div class="col" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-truncate text-white">Coming</h5>
                                </div>
                                <div class="col text-right" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-white"><i class="far fa-calendar-check" style="opacity: 1;"></i></h5>
                                </div>
                            </div>
                            <div class="row no-gutters text-right">
                                <div class="col">
                                    <h5 class="text-white">4</h5>
                                </div>
                            </div><a href="#" class="card-link">Link</a></div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 justify-content-sm-center justify-content-lg-center" style="margin: 0px;margin-top: 0px;padding: 10px;">
                    <div class="card bg-primary">
                        <div class="card-header" style="padding-right: 10px;padding-bottom: 10px;padding-top: 10px;padding-left: 10px;">
                            <h6 class="text-truncate text-center text-white">Messages</h6>
                        </div>
                        <div class="card-body" style="padding: 12px;margin: 0px;">
                            <div class="row no-gutters">
                                <div class="col" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-truncate text-white">New</h5>
                                </div>
                                <div class="col text-right" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-white"><i class="far fa-comment"></i></h5>
                                </div>
                            </div>
                            <div class="row no-gutters text-right">
                                <div class="col">
                                    <h5 class="text-white">2</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 justify-content-sm-center justify-content-lg-center" style="margin: 0px;margin-top: 0px;padding: 10px;">
                    <div class="card bg-warning">
                        <div class="card-header" style="padding-right: 10px;padding-bottom: 10px;padding-top: 10px;padding-left: 10px;">
                            <h6 class="text-truncate text-center text-white">Log</h6>
                        </div>
                        <div class="card-body" style="opacity: 1;padding: 12px;">
                            <div class="row no-gutters">
                                <div class="col" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-truncate text-white">Hours</h5>
                                </div>
                                <div class="col text-right" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-white">4 <i class="far fa-clock"></i></h5>
                                </div>
                            </div>
                            <div class="row no-gutters">
                                <div class="col">
                                    <h4 class="text-right text-white"></h4>
                                </div>
                                <div class="col">
                                    <h5 class="text-right text-white">50</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 justify-content-sm-center justify-content-lg-center" style="margin: 0px;margin-top: 0px;padding: 10px;">
                    <div class="card bg-info">
                        <div class="card-header" style="padding-right: 10px;padding-bottom: 10px;padding-top: 10px;padding-left: 10px;">
                            <h6 class="text-truncate text-center text-white">Reviews</h6>
                        </div>
                        <div class="card-body" style="padding: 12px;">
                            <div class="row no-gutters">
                                <div class="col" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-truncate text-white">Total</h5>
                                </div>
                                <div class="col text-right" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-white">3.5 <i class="fa fa-star"></i></h5>
                                </div>
                            </div>
                            <div class="row no-gutters text-right">
                                <div class="col">
                                    <h5 class="text-white">145 Reviews</h5>
                                </div>
                            </div><a href="#" class="card-link">Link</a></div>
                    </div>
                </div>
            </div>
            <div class="row no-gutters">
                <div class="col">
                    <div>
                        <form></form>
                    </div>
                </div>
                <div class="col"></div>
            </div>
        </div>
    </div>

无论如何希望这会有所帮助。