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

Question

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

问题：

这是我的代码，当您将窗口大小调整为大约中等时，您可以看到两列的重叠。如果可能的话，我如何保持简单并主要使用bootstrap 4来修复这种重叠？如果我选择导航栏类并崩溃，就不会有重叠。谢谢你的帮助。

<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-item100%的宽度。这不是必要的，我只是觉得它看起来更好，我想我会建议它，所以它会是：

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-md-2 col-sm-3和col-md-10 col-sm-9，而不是只有col-sm-2和col-sm-10主列

这里有一个更新的片段，其中有这个变化：

<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>

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