我想使用“nowrap”或任何其他替代方法来防止在 col-md-4 上堆叠 col-md-8，就像我对（无序列表）所做的那样。
下面是我的代码片段，我还提到了每个盒子的类别和颜色。
谢谢。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
#outside-container {
border: 2px solid red;
height: 500px;
white-space: nowrap;
}
#container1 {
border: 2px solid green;
height: 300px;
}
#colmd8 {
border: 2px solid yellow;
height: 400px;
}
#row1 {
border: 2px solid pink;
}
#list1 {
border: 2px solid red;
width: 200px;
height: 200px;
}
#container2 {
border: 2px solid navy;
height: 300px;
}
li {
display: inline-block;
}
ul {
white-space: nowrap;
}
#col4 {
border: 2px groove darksalmon;
}
</style>
<body>
<div class="container-fluid" id="outside-container">
<div class="col-md-8" id="colmd8">colmd8
<div class="container-fluid" id="container1">container1
<div class="row" id="row1">row1
<ul class="col-md-12 list-inline" id="colmd3" style="list-style: none">
<li id="list1">
<a href="#"></a>
</li>
<li id="list1">
<a href="#"></a>
</li>
<li id="list1">
<a href="#"></a>
</li>
<li id="list1">
<a href="#"></a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4" id="col4">colmd4
<div class="container-fluid" id="container2">container2
</div>
</div>
</div>
</body>
bootply http://www.bootply.com/kOyetvHiZZ
The flex-nowrap类于row2020 年为我工作：
<form class="row flex-nowrap">
...
</form>
Ref: Bootstrap 4 - 无列换行 https://stackoverflow.com/questions/43517536/bootstrap-4-no-column-wrapping/43517835
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
