在尝试为小型设备调整窗口大小时,我试图将左侧边栏变成一个小图标(=更多设置)。
问题:
这是我的代码,当您将窗口的大小调整为大约中等时,您会看到两列的重叠。如何保持简单并尽可能使用引导程序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 </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>
答案 0 :(得分: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 </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 </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>
无论如何希望这会有所帮助。