Question

我试图打破引导布局以满足我的一些要求。布局开始时是由MVC 5项目模板生成的默认布局，但我仍然停留在获取图像以填充整个浏览器宽度。我需要图像显示如下：

enter image description here

如果我添加一个带有img标记的部分，则图片不会在整个屏幕上展开，但会开始缩进＆＃39;从左边开始，引起了更加丰富的“溢出”。在右边，如：

enter image description here

我能看到的唯一选择是为body-content设置背景图片，但这会给图片下方的内容带来很多可怕的定位问题，并且有很多例子，例如：在文字下面＆＃34;这里是你得到的＆＃39;还有很多内容。

这是我第一次尝试的删节版本：

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>s</title>
    <link href="/Content/bootstrap.css" rel="stylesheet" />
    <link href="/Content/site.css" rel="stylesheet" />
    <script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
    <div class="navbar">
    ...
    </div>
    <div class="container body-content">
        <section id="landing">
            <img src="/Content/Images/landing_back.png" alt="The Tax-Free Investment Account" />
        </section>
        <footer>
        ...
        </footer>
    </div>
    <script src="/Scripts/jquery-1.10.2.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
    <script src="/Scripts/respond.js"></script>
</body>
</html>

Answer 1

您可以像这样设置整个身体的背景图像：

body {
    background-image: url("http://www.placecage.com/1000/800");
    background-size:100%;
}

但是，如果您希望使用Bootstrap创建特定元素的全宽度，那么您应该使用container-fluid而不是container来保存您的内容，因为该元素到达屏幕宽度的边界而不是固定宽度。

注意：全屏运行此代码段以获得完整效果。

.container,
.container-fluid {
  background-image: url("http://www.placecage.com/1000/800");
  min-height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-12">Fixed width</div>
  </div>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">Full width</div>
  </div>
</div>

使图像在Bootstrap布局中填充背景

1 个答案: