gpt4 book ai didi

html - 缩小尺寸时防止 Bootstrap 中列的换行/堆叠?

转载 作者:太空狗 更新时间:2023-10-29 15:28:00 27 4
gpt4 key购买 nike

我想使用“nowrap”或任何其他替代方法来阻止 col-md-8 在 col-md-4 上的堆叠,就像我对(无序列表)所做的一样。

下面是我的代码片段,我还用颜色提到了每个盒子的类别。

谢谢。

<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

最佳答案

上的flex-nowrap 类在 2020 年对我有用:

<form class="row flex-nowrap">
...
</form>

引用:Bootstrap 4 - no column wrapping

关于html - 缩小尺寸时防止 Bootstrap 中列的换行/堆叠?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41943463/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com