作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我想使用“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>
最佳答案
行
上的flex-nowrap
类在 2020 年对我有用:
<form class="row flex-nowrap">
...
</form>
关于html - 缩小尺寸时防止 Bootstrap 中列的换行/堆叠?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41943463/
在 Vaadin 7.0,显示时JavaBean Table 中的数据与 BeanContainer ,用新数据刷新表的正确方法是什么? 最佳答案 该表通过监听器监视表项的属性。如果您通过表的 Ite
首先,我使用的是带有 Axis2 1.6.2 的 eclipse,我正在 tomcat 6 上部署我创建的 Web 服务。Web 服务是在 eclipse 中通过自上而下的方法创建的。 我被要求使对我
我已将 Rails 3.1.1 应用程序升级到 Rails 3.1.3,现在,对于每个请求,它仅响应错误数量的参数(3 for 1)。不幸的是,它没有说明错误在哪里,并且应用程序跟踪为空。我认为存在一
我是一名优秀的程序员,十分优秀!