Navbar和Jumbotron之间的差距 [英] Gap between Navbar and Jumbotron

查看:85
本文介绍了Navbar和Jumbotron之间的差距的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在构建,我想您可以为要构建的站点调用一个模板,但是对于引导我还是很陌生,因此很难确定哪些CSS规则会影响元素等.

I am building I suppose you could call a template for the site I am going to build however I am still pretty new to bootstrap and thus have trouble figuring which CSS rules are affecting elements etc.

我遇到的问题是我无法让超大型机与导航栏的底部齐平放置.我在这里找到了关于同一问题的几个问题,但解决方案不起作用.

The problem I am having is I cannot get the Jumbotron unit to sit flush with the bottom of the navbar. I have found a few questions on here about the same problem but the solutions did not work.

这是我的代码

    </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中拉出的,而我的样式表.css与这些id无关,所以这样做似乎毫无意义.

I would provide the css but as it is all being pulled from an unchanged version of bootstrap and my stylesheet.css has nothing relating to any of these ids etc it seems pointless to do so.

我期待着听到您的解决方案的男孩和女孩

I look forward to hearing your solutions guys and girls

推荐答案

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

add this css .navbar { margin-bottom:0px;} if dont want a margin at the bottom of the nav.

这篇关于Navbar和Jumbotron之间的差距的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆