Question

我终于想出了如何使jumbotron图像适合用户浏览器的整个宽度和高度：

.jumbotron {
    background: url(images/yelllow.png) no-repeat center;
    position: fixed; 
    top: 0; 
    left: 0; 
    min-width: 100%;
    min-height: 100%;
}

现在，当我添加另一个部分div class = row时，列不显示在jumbotron图像下方。相反，它们显示在页面顶部并与jumbotron文本重叠。 JS小提琴：http://jsfiddle.net/srLngrsx/

我隔离了上面的每个CSS属性，发现position: fixed导致了这种情况发生。当我删除position: fixed下面的列时，就像它们应该的那样，但是现在jumbotron图像的尺寸更小，不适合屏幕。

任何人都可以识别或解释为什么position: fixed导致其他元素无法正确定位？如何才能使jumbotron标题适合页面的宽度和高度，其余内容显示在下面？

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="portfolio.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>

    <div class="jumbotron text-center">
        <h1>test</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo</p>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <h3>Column 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
            </div>
            <div class="col-sm-4">
                <h3>Column 2</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
            </div>
            <div class="col-sm-4">
                <h3>Column 3</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

将您的jumbotron移动到容器中，并为其添加一行和全宽列。

http://jsfiddle.net/srLngrsx/1/

<div class="container">
    <div class="row">
        <div class="col-xs-12 jumbotron text-center">
            <h1>test</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo</p>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">
            <h3>Column 1</h3>
            ...

Answer 2

这是你需要的吗？

.jumbotron {
    background: url(images/yelllow.png) no-repeat center;
    top: 0; 
    left: 0; 
    min-width: 100%;
    min-height: 100vh;
}

小提琴 http://jsfiddle.net/srLngrsx/3/

Answer 3

当你对任何元素使用position：fixed时，你必须在其后使用margin-top作为元素。在这个例子中，你必须使用margin-top作为类行。因为固定定位元素之后的元素将从固定元素的顶部位置开始。

.jumbotron {
    background: url(images/yelllow.png) no-repeat center;
    position: fixed; 
    top: 0; 
    left: 0; 
    min-width: 100%;
    min-height: 100%;
}
.row {
    margin-top:300px;
}

http://jsfiddle.net/srLngrsx/4/

修正了Jumbotron图像 - 列溢出？

3 个答案: