Question

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Inteenships</title>
    <link href="https://fonts.googleapis.com/css?family=Zilla+Slab" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">

      <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="#">Inteenships</a>
      </div>

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

    </div>
  </nav>





  <div id="myCarousel" class="carousel slide" data-ride="carousel">

    <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" role="listbox">

      <div class="item active">
        <img src="..." alt="Picture 1">
        <div class="carousel-caption">
          <h1>
            Picture 1
          </h1>
          <p>
            Nothing Special
          </p>
        </div>
      </div>

      <div class="item">
        <img src="..." alt="Picture 2">
        <div class="carousel-caption">
          <h1>
            Picture 2
          </h1>
          <p>
            Nothing Special
          </p>
        </div>
      </div>

      <div class="item">
        <img src="..." alt="Picture 3">
        <div class="carousel-caption">
          <h1>
            Picture 3
          </h1>
          <p>
            Nothing Special
          </p>
        </div>
      </div>

    </div>

    <a href="#myCarousel" class="left carousel-control" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous Slide</span>
    </a>
    <a href="#myCarousel" class="right carousel-control" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next Slide</span>
    </a>



  </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

我正在尝试在我的主页上安装一个bootstrap导航栏和旋转木马，但是当我加载它时，旋转木马不会出现。如果我摆脱了导航栏，则会出现轮播，但是在导航栏的位置。我的代码中有错误吗？我的css中只有一个重置样式：

*{
   padding: 0;
   margin: 0;
 }

然而，这并不会影响任何事情。我需要删除或添加任何内容才能使其正常工作吗？

其他问题：我对html / css相当新。带有一类容器的div有什么意义？

Answer 1

导航栏将有位置：固定;所以给你的身体填充顶部。

body{ padding-top: 51px}

51px是导航栏的高度。

容器是一个引导类，它具有固定的宽度（不同分辨率下的宽度不同）和左右自动边距，它将通过给左右相等的空间将具有类容器的div对齐。

Answer 2

.navbar-fixed-top使导航栏的位置固定，当您的旋转木马的位置为相对时，它不计算在内。所以在carousel类上添加一些边距或填充，或删除.navbar-fixed-top类。

.carousel
{
   margin-top:60px;
}

页面中不能有bootstrap导航栏和轮播

2 个答案: