我想在 bootstrap 的导航栏中有两列。但是当我这样做并尝试调整大小时,右列与左列重叠。我不明白为什么。我看到视口(viewport)大小为 769px 时出现的问题一直持续到 992px。
HTML
.site-wrapper {
width: 100%;
height: 100%;
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
border-top: 5px solid #5A332B;
background-color: #ccbb99 !important;
overflow-y: auto;
}
.navbar {
border-radius: 0;
border: none;
background-color: #683F36;
}
.navbar-brand {
cursor: pointer;
color: #ffffff !important;
font-family: chalkitup, "sans-serif";
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="site-wrapper">
<div class="navbar navbar-default">
<div class="container-fluid" style="background-color: #8c8c8c;">
<div class="row">
<div class="col-md-9" style="background-color: #1b6d85;">
<div class="navbar-header">
<a class="navbar-brand"><span class="icon ion-arrow-left-c"></span> Back</a>
</div>
</div>
<div class="col-md-3" style="background-color: #3c763d;">
Scoreboard
</div>
</div>
</div>
</div>
最佳答案
试试下面的代码
<div class="site-wrapper">
<div class="navbar navbar-default">
<div class="container-fluid" style="background-color: #8c8c8c;">
<div class="row">
<div class="col-md-9 col-xs-12" style="background-color: #1b6d85;">
<div class="navbar-header">
<a class="navbar-brand"><span class="icon ion-arrow-left-c"></span> Back</a>
</div>
</div>
<div class="col-md-3 col-xs-12" style="background-color: #3c763d;">
Scoreboard
</div>
</div>
</div>
</div>
我在这里添加了工作示例
.site-wrapper {
width: 100%;
height: 100%;
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
border-top: 5px solid #5A332B;
background-color: #ccbb99 !important;
overflow-y: auto;
}
.navbar {
border-radius: 0;
border: none;
background-color: #683F36;
}
.navbar-brand {
cursor: pointer;
color: #ffffff !important;
font-family: chalkitup, "sans-serif";
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="site-wrapper">
<div class="navbar navbar-default">
<div class="container-fluid" style="background-color: #8c8c8c;">
<div class="row">
<div class="col-md-9 col-xs-12" style="background-color: #1b6d85;">
<div class="navbar-header">
<a class="navbar-brand"><span class="icon ion-arrow-left-c"></span> Back</a>
</div>
</div>
<div class="col-md-3 col-xs-12" style="background-color: #3c763d;">
Scoreboard
</div>
</div>
</div>
</div>
关于html - Bootstrap 右列与左列重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42110285/