Question

我使用Bootstrap来创建我的第一个网站，但是Jumbotron div中的背景图像没有填满屏幕的整个宽度，两边都留有一个窄边距，我尝试更改填充，边距和更改宽度div为100％，但它没有工作。

＆＃13;

body {
  background-color: #ffe6e6;
}
.navbarheight {
  height: 60px;
}
#myname {
  margin-left: 0px;
  font-size: 45px;
}
.allnavicons {
  margin-right: 50px;
}
.navicon {
  font-size: 25px;
  margin-right: 30px;
}
.jumbotron {
  width: 100%;
  background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ-H9Giy0rTSpFwziVBPYtGvAPNcDjSTbQpZDJvVV2vXQ6DClHdOQ")
}
#welcome {
  text-align: center;
  padding-top: 30px;
}
</style>

＆＃13;

<!DOCTYPE html>

<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
</head>

<body>
  <div class="container-fluid">
    <!--Navbar start........................-->
    <nav class="navbar navbar-inverse navbar-fixed-top navbarheight">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#" id="myname">Mohamed Hegazy</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse navbar-right">

          <ul class="nav navbar-nav allnavicons">
            <li class="active navicon"><a href="#">About</a>
            </li>
            <li><a href="#about" class="navicon">Portfolio</a>
            </li>
            <li><a href="#contact" class="navicon">Contact</a>
            </li>
          </ul>

        </div>
        <!--/.nav-collapse -->
      </div>
    </nav>
    <!--Navbar end..........................-->
    <!--jumbotron container start..........................-->
    <div class="jumbotron">
      <div class="container">
        <h1 id="welcome">Welcome to my Portfolio!</h1>
        <p></p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a>
        </p>
      </div>
    </div>
    <!--jumbotron container end..........................-->
</body>

</html>

＆＃13;

Answer 1

将此添加到您的CSS代码中：

  .container-fluid{
    padding:0;
  }

如何在Bootstrap中制作背景图像占据屏幕的整个宽度？

1 个答案: