Bootstrap：全宽背景

时间：2018-09-29 11:26:03

标签： html css twitter-bootstrap

我在html中有以下代码：

.class4{
  height: 650px; background-color: SlateGrey; padding-top: 8px;padding-left: 20px; 
}

h1.b{
  text-align: center;
  color:white;
  font-weight: bold;
  font-family:Segoe WP Semibold
}
<!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
      <div class="container-fluid class4">
        <br><br><br><br>
        <h1 class="b" id="ABOUT">ABOUT</h1><hr width="87%">
        <br><br>
        <div class="container"> 
          <div class="row" >
            <div class="col-xs-6 col-md-6 "><p style="color:white"><span style="font-size:120%;font-family:Segoe WP Semibold">Sed ut perspiciatis unde omnis iste natus error sit vo- luptatem accusantium doloremque laudantium, totam rem aperiam</span><br><br><br><span style="font-size:80%;font-family:Segoe WP Semibold"> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam elus modi tempora incidunt ut labore et dolore <br>magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum <br> exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?<br><br>

            Quis autem vei eum lure reprehenderit qui in ea voluptate velit esse quam nlhil molestiae consequatur, vel illum qui dolorem eum</span></p>
            </div>
            <div class="col-xs-6 col-md-6 ">
              <img src="C:/Users/user/Desktop/images/7.jpg" alt="image">
            </div>
          </div>
        </div>
      </div>
    </body>
  </html>

此代码在笔记本电脑屏幕的背景上显示文本和图像：左侧为文本，右侧为图像

问题是当我inspect在移动设备上查看结果时，背景无法覆盖整个宽度，并且图像的很大一部分似乎不在背景中

如何避免这个问题？

4 个答案:

答案 0 :(得分：1)

我认为您只需将img宽度设置为100%。由于您使用的是引导程序，因此可以将class="w-100"添加到img中。

Try it online! 

.class4 {
  height: 650px;
  background-color: SlateGrey;
  padding-top: 8px;
  padding-left: 20px;
}

h1.b {
  text-align: center;
  color: white;
  font-weight: bold;
  font-family: Segoe WP Semibold
}

.w-100 {width: 100%}
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container-fluid class4"><br><br><br><br>
  <h1 class="b" id="ABOUT">ABOUT</h1>
  <hr width="87%">
  <br><br>
  <div class="container">
    <div class="row">
      <div class="col-xs-6 col-md-6 ">
        <p style="color:white"><span style="font-size:120%;font-family:Segoe WP Semibold">Sed ut perspiciatis unde omnis iste natus error sit vo- luptatem accusantium doloremque laudantium, totam rem aperiam</span><br><br><br><span style="font-size:80%;font-family:Segoe WP Semibold"> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam elus modi tempora incidunt ut labore et dolore <br>magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum <br> exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?<br><br>

Quis autem vei eum lure reprehenderit qui in ea voluptate velit esse quam nlhil molestiae consequatur, vel illum qui dolorem eum</span></p>
      </div>
      <div class="col-xs-6 col-md-6 "><img class="w-100" src="https://i.redd.it/b62rivs3uyo11.jpg" alt=""></div>
    </div>
  </div>
</div>

注意：您可能还希望从col-xs-6切换到col-xs-12，因此引导程序可以使用其网格的所有12列。

答案 1 :(得分：1)

为了使其对移动设备响应，我将两个元素的col-xs-6更改为col-xs-12，然后添加了width: 100%。看下面的例子：

.class4{
  height: 650px; background-color: SlateGrey; padding-top: 8px;padding-left: 20px; 
}

h1.b{
  text-align: center;
  color:white;
  font-weight: bold;
  font-family:Segoe WP Semibold
}

.w-100 {
  max-width: 100%
}
<!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
      <div class="container-fluid class4">
        <br><br><br><br>
        <h1 class="b" id="ABOUT">ABOUT</h1><hr width="87%">
        <br><br>
        <div class="container"> 
          <div class="row" >
            <div class="col-xs-12 col-md-6 "><p style="color:white"><span style="font-size:120%;font-family:Segoe WP Semibold">Sed ut perspiciatis unde omnis iste natus error sit vo- luptatem accusantium doloremque laudantium, totam rem aperiam</span><br><br><br><span style="font-size:80%;font-family:Segoe WP Semibold"> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam elus modi tempora incidunt ut labore et dolore <br>magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum <br> exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?<br><br>

            Quis autem vei eum lure reprehenderit qui in ea voluptate velit esse quam nlhil molestiae consequatur, vel illum qui dolorem eum</span></p>
            </div>
            <div class="col-xs-12 col-md-6 ">
              <img src="https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_960_720.jpg" alt="image" class="w-100">
            </div>
          </div>
        </div>
      </div>
    </body>
  </html>

答案 2 :(得分：1)

您可以将style="max-width: 100%; height: auto;"添加到img中。并且它将正常工作。

<div class="col-xs-6 col-md-6 "><img style="max-width: 100%; height: auto;" src="C:/Users/user/Desktop/images/7.jpg" alt="" ></div>

答案 3 :(得分：1)

要固定图像向右移动，您需要通过将宽度设置为100％来使尺寸响应。要确定背景没有覆盖整个页面，您需要删除定义的高度。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.class4{
background-color: SlateGrey; padding-top: 8px;padding-left: 20px; 
}

h1.b{ text-align: center;
         color:white;
         font-weight: bold;
         font-family:Segoe WP Semibold}

         .responsive {
           width: 100%;
         }
</style>
<body>
<div class="container-fluid class4"><br><br><br><br><h1 class = "b" id="ABOUT">ABOUT</h1><hr width="87%">
<br><br>
<div class="container"> 
<div class="row" >
<div class="col-xs-6 col-md-6 "><p style="color:white"><span style="font-size:120%;font-family:Segoe WP Semibold">Sed ut perspiciatis unde omnis iste natus error sit vo- luptatem accusantium doloremque laudantium, totam rem aperiam</span><br><br><br><span style="font-size:80%;font-family:Segoe WP Semibold"> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam elus modi tempora incidunt ut labore et dolore <br>magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum <br> exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?<br><br>

Quis autem vei eum lure reprehenderit qui in ea voluptate velit esse quam nlhil molestiae consequatur, vel illum qui dolorem eum</span></p></div>
<div class="col-xs-6 col-md-6 "><img class="responsive" src="https://i.redd.it/b62rivs3uyo11.jpg" alt="" ></div>
</div>
</div>
</div>
</div>
</body>
</html>
相关问题
最新问题