Question

此页面呈现图片比屏幕上的导航栏更宽的位置。我已经使用了所有推荐的技术而没有任何成功。我已经没有想法了，所以我不得不求助于此。

  <nav class="navbar navbar-inverse"> 
  <div class="container-fluid">
    <div class="navbar-header">

      <!-- screen minimised condensed nav options -->
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>

      <!-- Name brand -->

      <a class="navbar-brand" href="#">On The Waterfront </a>
    </div>

Answer 1

    <style>
  `.wrapper > div{
    background: #ddd;
    padding: 1em; 
    }

  `nested {
    display: grid;
    grid-template-columns: 1fr 1fr ;
  `}

  `.nested >div{
    border: #333 1px solid;
  }


  .within {
    display: grid;
    grid-template-columns: 70% 30%;

  }

  .wrapper{
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-auto-rows: (100px, auto);
    grid-gap: 1em;

  }

  .navbar{
    display: stretch;
    font-style: italic;  
  }

  ul{
    padding: 0;
    display: -webkit-box;
    display: -moz-box;
    display: box;
  }

  #myNavbar a{
    text-decoration: none;
    font-size: 13px;
    font-family: sans-serif;
    color: ivory;
  }


  #myNavbar a:hover {
    color: forestgreen;
    background-color:snow;
  }

  #myNavbar {

  }


  .box1{

    grid-column: 2/3;
    grid-row: 1/3;

  }




  .box2{ 

    grid-row: 1/3;
    grid-column: ;

  }

  .box3{
    grid-column:/3;
    grid-row: auto; 

  }
  .box4{
    grid-column: 0;


  }

  .container{
    grid-row: 1/4;
    grid-column:;
  }

  .img-responsive{display:block;height:150;max-width:100%}

  .carousel-indicators{

    grid-column: 3;
    grid-row: 1/4;
  }

  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: grey;
    color: white;
    text-align: center;
  }

  .carousel-inner > .item > img ,
  .carousel-inner > .item > a > img {
    width: 50%;
    margin: auto;

   `</style>

`

     <nav class="navbar navbar-inverse"> 
     <div class="container-fluid">
      <div class="navbar-header">

      <!-- screen minimised condensed nav options -->
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>

      <!-- Name brand -->

      <a class="navbar-brand" href="#">On The Waterfront </a>
      </div>


    <div class="collapse navbar-collapse" id="myNavbar">

      <!-- Nav Menu -->
   <ul class="nav navbar-nav">
     <li class="nav-item active"> 
      <a href="index.html">Home</a></li>
      <li><a href="gallery.html">Gallery</a></li>
      <li><a href="clips.html">Movie clips</a></li>
      <li><a href="#">Blog</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
   <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up                </a> </li>
    <li> <a href="#"><span class ="glyphicon glyphicon-log-in"></span>Log     
    In</a></li>
    </ul>
    </div>

  </div>
</nav>

     <!-- Carousel -->

    <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

     <!-- Wrapper for slides -->
      <div class="carousel-inner">
    <div class="item active">
      <img src="images/brando53.jpg" alt="Los Angeles" width="200px"       height="200px">
    </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
    </a>
    <div>


     <div class="wrapper">

     <!-- box  1 main layout -->
    <div class="box1"> <h1><b> On the Waterfront</b></h1>

我的导航栏出现问题，导致它没有拉伸到整个页面。这是代码：

1 个答案: