Bootstrap 3：容器 Div 重叠
rohit12sh
我正在使用 Bootstrap 3.3.7 设计前端并使用 Flatly 主题。
我遇到了一个我认为应该有简单解决方案的问题。
我想要一个容器分成 70-30 的比例，我正在尝试这个 HTML 代码：
<div class="container">
<div class="row">
<div class="col-sm-6">
<custom-data-table/>
</div>
<div class="col-sm-6">
<label for="searchQ">Search</label>
<input
required
minlength="1"
id="searchQ"
ngModel name="searchQ"
type="text"
#searchQ="ngModel"
(change)="log(searchQ)"/>
</div>
</div>
</div>
使用这种风格，无论我的屏幕有多宽，我都会遇到重叠 Div。
我想要由这 2 个 DIV 以 70:30 的比例共享而不重叠的屏幕。
任何建议/想法表示赞赏！
这是重叠问题： 
道
只需使用一列并使用您自己的自定义逻辑对其进行划分：
.myThing {
display:flex;
}
.myThing .firstColumn {
flex: 0 0 70%;
}
.myThing .second {
flex: 0 0 30%;
}
<div class="container">
<div class="row">
<div class="col-xs-12 myThing">
<div class="firstColumn"></div>
<div class="secondColumn"></div>
</div>
</div>
</div>
我在这里使用了 flex 但你可以使用浮动blocks，如果你愿意。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
Bootstrap下拉菜单与容器div重叠，而不是向下推
- 2
使div为“重叠”容器div
- 3
Bootstrap 3形式使用右上角div重叠
- 4
Bootstrap 3全宽div在容器中
- 5
容器div上的bootstrap 3 popover
- 6
html-DIV使用Bootstrap相互重叠
- 7
Bootstrap右上拉重叠div宽度
- 8
为什么div在Bootstrap中重叠？
- 9
跨度重叠div内的Bootstrap链接
- 10
CSS：对齐表重叠DIV容器
- 11
容器div水平重叠子级
- 12
调整大小时div容器与<p>重叠
- 13
跟随其主容器的div重叠
- 14
Div重叠另一个div -Bootstrap
- 15
全宽响应图像重叠Bootstrap 3
- 16
如何在Bootstrap 3中重叠列？
- 17
如何防止Bootstrap 3列重叠
- 18
Bootstrap 3-重叠内容（Clearfix？）
- 19
Bootstrap 3：将div扩展到容器的右侧
- 20
带有bootstrap（CSS）的fadeIn / FadeOut重叠div
- 21
带有bootstrap（CSS）的fadeIn / FadeOut重叠div
- 22
重叠div通过带有clearfix mixen溢出的容器：隐藏
- 23
如何避免Bootstrap中的div与另一个固定的div重叠？
- 24
Bootstrap 3导航栏固定顶部与内容重叠
- 25
Bootstrap 3中字形上的重叠通知标志
- 26
Bootstrap 3导航栏固定顶部与内容重叠
- 27
Bootstrap模态重叠菜单
- 28
Bootstrap Carousel动画重叠
- 29
Bootstrap - 列彼此重叠
我来说两句