- 首页
- 前端开发
- 带有位置的 Bootstrap 容器:absolute 丢失内部布局
带有位置的 Bootstrap 容器:absolute 丢失内部布局
[英] Bootstrap container with position:absolute loses layout inside
本文介绍了带有位置的 Bootstrap 容器:absolute 丢失内部布局的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在针对最新的 Bootstrap 3.3.2 版开发网站.我的任务是创建导航，它位于其他内容的顶部(悬停时的简单滚动菜单).对于这个菜单，我想使用 Bootstrap 列.
要将 .container-fluid 定位在其他容器的顶部，我需要将其从标准流中移除.所以需要使用position:absolute.一旦我将它应用到 .container-fluid(或它周围的包装器)，它就会失去 100% 的宽度，并且内部的整个布局都会丢失.
如果我从 .container-fluid(在我的例子中是 #menu)中删除 position:absolute，它会返回布局，但是未从标准流程中移除.
JSFiddle 只有这种情况:http://jsfiddle.net/q6v9wv31/
HTML:
<div class="row"><div class="col-xs-12"><p>此处的内容</p>
<div class="container ontop"><div class="row"><div class="col-xs-6"><p>菜单项 1</p>
<div class="col-xs-6"><p>菜单项 2</p>
CSS:
body {边距:10px；}.第一的 {高度:200px；背景色:#ddd;}.在上面 {高度:100px；背景色:#d00；位置:绝对；顶部:100px；}
项目的当前版本:http://html.accuraten.com/ssc-html-dev/public/
请帮助我理解，如何解决这个任务.
解决方案
如果你想设置位置为绝对并希望它有100%的宽度，你应该设置左右CSS样式:
HTML:
<div class="row"><div class="col-xs-12"><p>此处的内容</p>
<div class="ontop 容器"><div class="row"><div class="col-xs-4"><p>菜单项 1</p>
<div class="col-xs-4"><p>菜单项 2</p>
<div class="col-xs-4"><p>菜单项 2</p>
CSS:
body {边距:10px；}.第一的 {高度:200px；背景色:#ddd;}.在上面 {高度:100px；背景色:#d00；位置:绝对；顶部:100px；右:0；左:0；}
更改 left: 0 和 right: 0 到 10px 如果您希望它与第一个容器具有相同的边距.
绝对定位的元素不会在文档中获得任何空间.这意味着它在定位后不会留下空白空间.随后您可以使用属性 left、right、top 和 bottom 来放置框.
http://html.net/tutorials/css/lesson14.php#s2
I am developing website against latest Bootstrap version 3.3.2. My task is to create navigation, that is positioned on top of other content (simple roll over menu on hover). For this menu I want to use Bootstrap columns.
To position .container-fluid on top of other containers, I need to remove it from standard flow. So need to use position:absolute. As soon as I apply this to .container-fluid (or wrappers around it), it loses 100% width and whole layout inside gets lost.
If I remove position:absolute from .container-fluid (#menu in my case), it gets back layout, but is not removed from standard flow.
JSFiddle with only this case: http://jsfiddle.net/q6v9wv31/
HTML:
<div class="container first">
<div class="row">
<div class="col-xs-12">
<p>Content here</p>
</div>
</div>
</div>
<div class="container ontop">
<div class="row">
<div class="col-xs-6">
<p>Menu Item 1</p>
</div>
<div class="col-xs-6">
<p>Menu Item 2</p>
</div>
</div>
</div>
CSS:
body {
margin: 10px;
}
.first {
height: 200px;
background-color: #ddd;
}
.ontop {
height: 100px;
background-color: #d00;
position: absolute;
top: 100px;
}
Current version of project: http://html.accuraten.com/ssc-html-dev/public/
Please help me understand, how to solve this task.
解决方案
If you want to set the position to absolute and want it to have 100% width, you should set the left and right CSS styles:
HTML:
<div class="container first">
<div class="row">
<div class="col-xs-12">
<p>Content here</p>
</div>
</div>
</div>
<div class="ontop container">
<div class="row">
<div class="col-xs-4">
<p>Menu Item 1</p>
</div>
<div class="col-xs-4">
<p>Menu Item 2</p>
</div>
<div class="col-xs-4">
<p>Menu Item 2</p>
</div>
</div>
</div>
CSS:
body {
margin: 10px;
}
.first {
height: 200px;
background-color: #ddd;
}
.ontop {
height: 100px;
background-color: #d00;
position: absolute;
top: 100px;
right: 0;
left: 0;
}
Change left: 0 and right: 0 to 10px if you want it to have the same margin as the first container.
An element which is positioned absolute does not obtain any space in the document. This means that it does not leave an empty space after being positioned. You can subsequently use the properties left, right, top, and bottom to place the box.
http://html.net/tutorials/css/lesson14.php#s2
这篇关于带有位置的 Bootstrap 容器:absolute 丢失内部布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
