Question

大家好，我正在一个网站上工作，我希望div中的body标签内的内容。

我在体内制作了div但结果却是这样：

注意内容如何进入滑块。我希望将它放在滑块之后。

我正在使用bootstrap。

这是我的代码：

header {} .carousel {
  position: absolute;
  top: 0;
  height: 50%;
}
a.navbar-brand {
  font-family: 'Pacifico', cursive;
  text-align: center;
}
nav.navbar.navbar-inverse {
  border-radius: 0;
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  margin-bottom: 0;
  z-index: 100;
  top: 0;
}
nav.navbar.navbar-inverse a {
  color: rgb(232, 192, 163);
}
nav.navbar.navbar-inverse a:hover {
  background-color: rgb(232, 192, 163);
  transition: all 0.5s ease-in-out 0s;
  -moz-transition: all 0.5s ease-in-out 0s;
  -webkit-transition: all 0.5s ease-in-out 0s;
  -o-transition: all 0.5s ease-in-out 0s;
}
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:focus,
.navbar-inverse .navbar-nav>.active>a:hover {
  background-color: rgb(232, 192, 163);
}
.footer-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: ;
  text-align: center;
  color: black;
  background-color: white;
  z-index: 100;
}
.footer-bottom a {
  color: rgb(232, 192, 163);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="resources/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">


<header>

  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <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>

        <a class="navbar-brand" href="#">Beauty Salon Lisa</a>
        <br/>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a>
          </li>
          <li><a href="#">Page 1</a>
          </li>
          <li><a href="#">Page 2</a>
          </li>
          <li><a href="#">Page 3</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> Login</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>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

      <div class="item active">
        <img src="resources/header.jpg" alt="Chania">
      </div>

      <div class="item">
        <img src="resources/header.jpg" alt="Chania">
      </div>

      <div class="item">
        <img src="resources/header.jpg" alt="Chania">
      </div>

      <div class="item">
        <img src="resources/header.jpg" alt="Chania">
      </div>

    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>

    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>


  </div>

</header>


<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" href="#"></a>
    </p>
  </div>
  <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" href="#"></a>
    </p>
  </div>
  <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" href="#"></a>
    </p>
  </div>
</div>



<div class="footer-bottom">

  <div class="container">


    <div class="row">

      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">

        <div class="copyright">

          Copyright Beeldmateriaal: Maria Galland©, Neoderma ©

        </div>

      </div>

      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">

        <div class="design">

          <a href="#">Neem contact op </a> | <a target="_blank" href="#">Maak direct een afspraak</a>

        </div>

      </div>

    </div>

  </div>

</div>

我决定创建一个小提琴，但由于某种原因，当我使用jsfiddle时结果很好。我没有用不同的输出更改任何相同的代码。

https://jsfiddle.net/xyvvf56b/

Answer 1

将轮播的位置更改为亲戚：

header {} .carousel {
  position: relative;
  top: 0;
  height: 50%;
}

Answer 2

试试这个会起作用

header {} .carousel {
  position: absolute;
  top: 0;
  height: 50%;
}
a.navbar-brand {
  font-family: 'Pacifico', cursive;
  text-align: center;
}
nav.navbar.navbar-inverse {
  border-radius: 0;
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  margin-bottom: 0;
  z-index: 100;
  top: 0;
}
nav.navbar.navbar-inverse a {
  color: rgb(232, 192, 163);
}
nav.navbar.navbar-inverse a:hover {
  background-color: rgb(232, 192, 163);
  transition: all 0.5s ease-in-out 0s;
  -moz-transition: all 0.5s ease-in-out 0s;
  -webkit-transition: all 0.5s ease-in-out 0s;
  -o-transition: all 0.5s ease-in-out 0s;
}
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:focus,
.navbar-inverse .navbar-nav>.active>a:hover {
  background-color: rgb(232, 192, 163);
}
.footer-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: ;
  text-align: center;
  color: black;
  background-color: white;
  z-index: 100;
}
.footer-bottom a {
  color: rgb(232, 192, 163);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="resources/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">



<header>

  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <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>

        <a class="navbar-brand" href="#">Beauty Salon Lisa</a>
        <br/>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a>
          </li>
          <li><a href="#">Page 1</a>
          </li>
          <li><a href="#">Page 2</a>
          </li>
          <li><a href="#">Page 3</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> Login</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>

    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

      <div class="item active">
        <img src="https://cdn.spafinder.com/2016/01/spa-treatments-to-try.jpg" alt="Chania">
        <div class="carousel-caption">
          <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>
        </div>
      </div>

      <div class="item">
        <img src="https://cdn.spafinder.com/2016/01/spa-treatments-to-try.jpg" alt="Chania">
        <div class="carousel-caption">
          <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>
        </div>
      </div>





    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>

    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>


  </div>

</header>

<div class="footer-bottom">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <div class="copyright">
          Copyright Beeldmateriaal: Maria Galland©, Neoderma ©
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">

        <div class="design">

          <a href="#">Neem contact op </a> | <a target="_blank" href="#">Maak direct een afspraak</a>

        </div>

      </div>

    </div>

  </div>

</div>

内容定位不起作用

2 个答案: