Question

我正在构建我想你可以为我要构建的网站调用一个模板但是我仍然是新手，因此很难确定哪些CSS规则会影响元素等。

我遇到的问题是我无法让Jumbotron单元与导航栏的底部齐平。我在这里找到了一些关于同样问题的问题，但解决方案没有用。

这是我的代码

    </head>

  <body>

    <div class="row">
    <div>

    <img src="http://placehold.it/1600x300" width="100%">

    </div>

    <!-- Static navbar -->
    <div class="navbar navbar-default navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="navbar-collapse collapse">
        <ul class="nav nav-justified" id="myNav">

            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#contact">Services</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <div class="jumbotron" id="openingtext">
        This is where the opening sale text will go
    </div>

    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
          <h2>Heading</h2>

我会提供css，但因为它是从一个未更改的bootstrap版本中提取出来的，而且我的stylesheet.css与这些id中的任何一个都没有任何关系，所以这样做似乎毫无意义。

我期待听到您的解决方案男女老少

Answer 1

如果不希望导航底部有边距，请添加此css .navbar { margin-bottom:0px;}。

Navbar和Jumbotron之间的差距

1 个答案: