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-item 100% 的宽度。这不是必需的，我只是认为它看起来更好，并认为我会建议这样做：

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

这是您更新后的 sn-p：

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

这是一个更新后的 sn-p：

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

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