HTML   发布时间:2022-04-14  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了html – 导航栏和新引导后的项目之间没有空格?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
所以我用新的bootstrap V3搞砸了,绝对有一件事让我疯狂.固定的顶部导航栏和跟随它的项目之间没有空格.我已经尝试更改项目上的填充(无论是jumbotron还是转盘),导航栏上的填充无效.它真的让我疯狂.任何修复?
<body>
   <div class="navbar navbar-inverse navbar-fixed-top">
         <div class="container">
        <a  href="index.html" class="navbar-brand">Gaming</a>
            <button class="navbar-toggle" data-toggle="collapse" data-target=              
            ".navbar-collapse">
            <span class="icon-bar"></span>
           <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="index.html">Home</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Videos</a></li>
                    <li><a href="#">Shows</a></li>
                    <li><a href="#">Cheats</a></li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-
                     toggle="dropdown">Forums<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">General</a></li>
                            <li><a href="#">Help</a></li>
                            <li><a href="#">Games</a></li>

                        </ul>
                    </li>
                    <li><a href="#">eSports</a></li>
                </ul>
             </div>                
        </div>
       </div>
     <div class="divider"></div>
    <div class="container">
  <div id="myCarousel" class="carousel slide">
<!-- 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>
<div class="carousel-inner">
<div class="item active">
  <img src="img/bAnner.jpg">
  <div class="container">
    <div class="carousel-caption">
      <h1>Bootstrap 3 Carousel Layout</h1>
      <p>This is an example layout with carousel that uses the Bootstrap 3 styles.
      <a title="Bootstrap 3" href="http://getbootstrap.com" class="">Bootstrap 3 RC 1  
      is now available!</a></p>
      <p><a class="btn btn-large btn-priMary" href="#">Sign up today</a>
    </p></div>
  </div>
  </div>
  <div class="item">
  <img src="img/bAnner.jpg">
  <div class="container">
    <div class="carousel-caption">
      <h1>Changes to the Grid</h1>
      <p>Bootstrap 3 still features a 12-column grid,but many of the CSS class names 
       have completely changed.</p>
      <p><a class="btn btn-large btn-priMary" href="#">Learn more</a></p>
    </div>
  </div>
  </div>
  <div class="item">
  <img src="img/bAnner.jpg">
  <div class="container">
    <div class="carousel-caption">
      <h1>Percentage-based sizing</h1>
      <p>With "mobile-first" there is now only one percentage-based grid.</p>
      <p><a class="btn btn-large btn-priMary" href="#">Browse gallery</a></p>
    </div>
   </div>
  </div>
 </div>
 <!-- Controls -->
 <a class="left carousel-control" href="#myCarousel" data-slide="prev">
 <span class="icon-prev"></span>
 </a>
 <a class="right carousel-control" href="#myCarousel" data-slide="next">
 <span class="icon-next"></span>
 </a>  
 </div>
 </div>

解决方法

bootstrap documentation建议将顶部填充添加到< body> – 等于导航栏的高度:
body {
    padding-top: 50px; /* whatever the height of your navbar is; the
                             default is 50px */
}

大佬总结

以上是大佬教程为你收集整理的html – 导航栏和新引导后的项目之间没有空格?全部内容,希望文章能够帮你解决html – 导航栏和新引导后的项目之间没有空格?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。