使用Bootstrap拉伸图像和居中内容
Pro*_*ofK 13 html css twitter-bootstrap-3
我需要布置一个包含两个图像的网页,这两个图像必须拉伸以填充可用的浏览器窗口,但文本内容位于页面的中心.到目前为止,我似乎能够做到这一点的唯一方法是,a)将两个图像合并为一个,并将其设置为背景图像body,然后小心地垂直定位内容的中间带以适应图像之间的间隙,或者,b)将container(固定的)div嵌套在一个container-fluid握住图像和固定的文本内容中.然而,我看到了那些提倡嵌套自举容器的人的严厉警告和蔑视.
这张图片可能有助于传达我的需求:
"图像1"必须在整个窗口上延伸,内容保持居中,与"图像2"相同,图像之间有垂直的白色条带,底部屏幕右侧有一条普通的灰色条带.
你可以试试这个.
请注意,您必须根据设计需要应用一些自定义css.根据例子:
.container-fluid {
padding: 0;
}
.container-fluid.wrapper {
padding-top: 100px;
}
.ht33 {
height: 200px;
}
.container.content {
width: 970px;
position: absolute;
height: 800px;
background: gray;
color: #fff;
top: 0;
left: 0;
right: 0;
margin-right: auto;
margin-left: auto;
}<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container-fluid wrapper">
<div class="container content"></div>
<div class="container-fluid bg-primary ht33"></div>
<div class="container-fluid bg-warning ht33"></div>
<div class="container-fluid bg-danger ht33"></div>
</div>
你可以尝试这样做：
\n\nhttp://jsfiddle.net/kqoonr24/1/
\n\n您可能必须对其进行调整以满足您的需求，但这是基本思想。:-)
\n\n基本上，您需要一个充当背景的 div 并容纳构成每个背景元素的各个 div。
\n\n然后，之后您将需要一个容纳实际内容的前景 div。
\n\n\r\n
\r\n\n\n\r\n
\r\nhtml,\r\nbody,\r\n.wrapper,\r\n.foreground,\r\n.background {\r\n height: 100%;\r\n width: 100%;\r\n}\r\n.foreground {\r\n background-color: green;\r\n max-width: 400px;\r\n margin: 0 auto;\r\n}\r\n.background {\r\n position: absolute;\r\n z-index: -1;\r\n}\r\n.background > * {\r\n height: 33%;\r\n content: \'\';\r\n}\r\n.background-element-1 {\r\n background-color: blue;\r\n}\r\n.background-element-2 {\r\n background-color: red;\r\n}\r\n.background-element-3 {\r\n background-color: orange;\r\n}<!-- Latest compiled and minified CSS -->\r\n<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">\r\n\r\n<!-- Optional theme -->\r\n<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">\r\n\r\n<!-- Latest compiled and minified JavaScript -->\r\n<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>\r\n\r\n<body>\r\n <div class="wrapper">\r\n <div class="background">\r\n <div class="background-element-1"></div>\r\n <div class="background-element-2"></div>\r\n <div class="background-element-3"></div>\r\n </div>\r\n <div class="foreground">\r\n <div class="foreground-inner">\r\n I am your text!\r\n </div>\r\n </div>\r\n </div>\r\n</body>您可能需要调整它，因为我做了很多假设\xe2\x80\x94如果您需要更多帮助，请告诉我。
\n