旋转木马箭头在Bootstrap 3

时间：2015-09-30 16:23:37

标签： css twitter-bootstrap carousel navbar

我有一个网站，让用户在Bootstrap上选择不同的布局。

Helloguest.com.au

当轮播在导航栏上方时，一切正常（选择下面任何颜色主题的BannerFirst）。当轮播位于导航栏下方时，轮播的导航箭头与上面的导航栏重叠，使其无响应（选择HeaderFirst ...）。

我确信一个简单的CSS技巧可以解决问题。有什么想法吗？

2 个答案:

答案 0 :(得分：1)

你不应该在navbar周围找到一个专栏;删除＆＃34; col-md-12＆＃34;来自navbar之上的div。见例。

＆＃13;
＆＃13; 
 @font-size-base: 18px;
 #map-container {
   height: 600px;
   width: 100%;
 }
 #minimap-container {
   min-height: 200px;
   width: 100%;
 }
 .mini0,
 .mini1,
 .mini2,
 .mini3,
 .mini4,
 .mini5 {
   font-size: 9px;
   font-weight: normal;
   text-decoration: none;
 }
 .mini0 {
   color: red;
 }
 .mini1 {
   color: grey;
 }
 .mini2 {
   color: orange;
 }
 .mini3 {
   color: green;
 }
 .mini4 {
   color: blue;
 }
 .mini5 {
   color: violet;
 }
 .icon16link {
   border: 0px;
   background-color: transparent;
   width: 16px;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 .icon12link {
   border: 0px;
   background-color: transparent;
   width: 12px;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 .iconlink {
   border: 0px;
   cursor: pointer;
   vertical-align: text-middle;
 }
 .iconXLink {
   cursor: pointer;
   background-color: #dddddd;
   vertical-align: text-middle;
 }
 .iconNoLink {
   border: 0px;
   vertical-align: text-middle;
 }
 .minithumb {
   height: 24px;
 }
 .star {
   vertical-align: middle;
 }
 body {
   font-family: verdana;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;
 }
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {} p {
   font-size: 1.25em;
   line-height: 1.6;
   color: #000;
 }
 hr {
   max-width: 400px;
   border-color: #999999;
 }
 .brand,
 .address-bar {
   display: none;
 }
 .navbar-brand {
   text-transform: uppercase;
   font-weight: 900;
   letter-spacing: 2px;
 }
 .navbar-nav {
   text-transform: uppercase;
   letter-spacing: 3px;
 }
 .img-full {
   min-width: 100%;
 }
 .brand-before,
 .brand-name {
   text-transform: capitalize;
 }
 .brand-before {
   margin: 15px 0;
 }
 .brand-name {
   margin: 0;
   font-size: 3em;
 }
 .tagline-divider {
   margin: 15px auto 3px;
   max-width: 250px;
   border-color: #999999;
 }
 .box {
   margin-bottom: 0px;
   padding: 0px 0px;
   background: #fff;
   background: rgba(255, 255, 255, 0.9);
 }
 .intro-text {
   text-transform: uppercase;
   font-size: 1.25em;
   font-weight: 400;
   letter-spacing: 1px;
 }
 .img-border {
   float: none;
   margin: 0 auto 0;
   border: #999999 solid 1px;
 }
 .img-left {
   float: none;
   margin: 0 auto 0;
 }
 footer {
   background: #fff;
   background: rgba(255, 255, 255, 0.9);
 }
 footer p {
   margin: 0;
   padding: 50px 0;
 }
 @media screen and (min-width: 768px) {
   .brand {
     display: inherit;
     margin: 0;
     padding: 30px 0 10px;
     text-align: center;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
     font-family: Verdana, Arial, sans-serif;
     font-size: 5em;
     font-weight: 700;
     line-height: normal;
     color: #fff;
   }
   .top-divider {
     margin-top: 0;
   }
   .img-left {
     float: left;
     margin-right: 25px;
   }
   .address-bar {
     display: inherit;
     margin: 0;
     padding: 0 0 40px;
     text-align: center;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
     text-transform: uppercase;
     font-size: 1.25em;
     font-weight: 400;
     letter-spacing: 3px;
     color: #fff;
   }
   .navbar {
     border-radius: 0;
   }
   .navbar-header {
     display: none;
   }
   .navbar {
     min-height: 0;
   }
   .navbar-default {
     border: none;
     background: #fff;
     background: rgba(255, 255, 255, 0.9);
   }
   .nav>li>a {
     padding: 10px;
   }
   .navbar-nav>li>a {
     line-height: normal;
   }
   .navbar-nav {
     display: table;
     float: none;
     margin: 0 auto;
     table-layout: fixed;
     font-size: 1.0em;
   }
 }
 @media screen and (min-width: 1200px) {
   .box:after {
     content: '';
     display: table;
     clear: both;
   }
 }
 /* carousel */
 .carousel,
 .carousel-inner > .item {
   display: run-in;
   width: 100%;
   height: auto!important;
 }
 .carousel-inner > .item > img,
 .carousel-inner > .item > a > img {
   display: block;
   height: auto;
   max-width: 100%;
   line-height: 1;
 }
 .carousel-container {
   margin-left: 0;
 }
 .carousel-caption {
   z-index: 10;
 }
 /* special elements */
 .Prop_Body {} .Prop_Address {
   font-size: 1em;
 }
 .Prop_Copyright {
   font-size: 0.8em;
 }
 .Prop_Snapshot {
   padding: 6px;
 }
 .Prop_Highlights {
   padding: 6px;
 }
 .Prop_Review {
   padding: 6px;
 }
 .Prop_MiniMap {
   padding: 6px;
 }
 .Prop_SidePhotos {
   padding: 6px;
 }
 .Prop_Agent {
   padding: 6px;
 }
 .colLeft {
   padding-top: 0px;
 }
 .colCenter {
   padding-top: 0px;
 }
 .colRight {
   padding-top: 0px;
 }
 /* gallery */
 /* popup large picture */
 .ddimgtooltip {
   box-shadow: 3px 3px 5px #666;
   /* shadow for CSS3 capable browsers */
   -webkit-box-shadow: 3px 3px 5px #666;
   -moz-box-shadow: 3px 3px 5px #666;
   display: none;
   position: absolute;
   border: 1px solid black;
   background: grey;
   color: white;
   z-index: 2000;
   padding: 8px;
   word-wrap: normal;
   max-width: 480px;
 }
 .gallerythumb {
   margin-bottom: 16px;
   margin-right: 16px;
 }
 .mini1 {
   font-size: 0.8em;
 }
 /* main tags */
 body {
   background: #FFF;
 }
 /* whole screen bgn color */
 /* body { background: url('../xMedia/Bgn/Pool2.jpg') no-repeat center fixed; } */
 p {
   color: #666;
 }
 /* text font color */
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 .h1,
 .h2,
 .h3,
 .h4,
 .h5,
 .h6 {
   color: #4190B0;
 }
 /* all titles font color */
 h2,
 .h2 {}
 /* h2 title font color */
 h3,
 .h3 {
   color: #A6A6A6;
 }
 /* h3 title font color */
 h4,
 .h4 {
   color: #cecece;
 }
 /* h4 title font color */
 h5,
 .h5 {}
 /* h5 title font color */
 h6,
 .h6 {}
 /* h6 title font color */
 /* navbar */
 .navbar-default {
   background: transparent;
 }
 /* navbar bgn color */
 .navbar-default .navbar-nav > li > a {
   color: #4190B0;
 }
 /* navbar item font color */
 .navbar-default .navbar-nav > li > a:hover {
   color: #39626F;
 }
 /* navbar item hover font color */
 .navbar-default .navbar-nav > li > a:focus {
   color: #39626F;
 }
 /* navbar item focus font color */
 .navbar-default .navbar-nav > .active > a {
   color: #FFF;
   background-color: #4190B0;
 }
 /* active navbar item bgn & font color */
 .navbar-default .navbar-nav > .active > a:hover {
   color: #FFF;
   background-color: #39626F;
 }
 /* active navbar item hover bgn & font color */
 .navbar-default .navbar-nav > .active > a:focus {
   color: #FFF;
   background-color: #39626F;
 }
 /* active navbar item focus bgn & font color */
 /* components */
 .brand-name {
   color: #69A2C8;
 }
 /* brand-name font color */
 .brand-subname {
   color: #69A2C8;
 }
 /* brand-subname font color */
 .brand-strapline {
   color: #999;
 }
 /* brand-strapline font color */
 .Prop_Address {
   color: #888;
 }
 /* address font color */
 .Prop_Copyright {
   color: #999;
 }
 /* copyright font color */
 .Prop_Highlights,
 .Prop_Highlights p {
   background: #3673b8;
   color: #fff;
 }
 /* highlights bgn color */
 .Prop_Snapshot {
   background: #3673b8;
   color: #fff;
 }
 /* keyfigures bgn color */
 .Prop_Review,
 .Prop_Review p {
   background: #9EB8CF;
   color: #fff;
 }
 /* review bgn color */
 .Prop_Agent {
   background: #9EB8CF;
 }
 /* review bgn color */
 .Prop_MiniMap {
   border: 1px solid grey;
   background: #FFF;
 }
 /* minimap bgn color */
 .Prop_SidePhotos {
   background: #FFF;
 }
 /* sidephotos bgn color */
 .btn-info {
   background: #39626F;
   border-color: #39626F;
 }
 /* button bgn color */
 .reviewTitle {
   color: #fff;
 }
 .reviewAuthor {
   color: #cecece;
   font-size: 0.9em;
   font-style: italic;
   text-align: center;
 }
 .reviewMore {
   text-align: right;
   color: blue;
 }
 .guestbookTitle {
   color: #000;
   font-size: 1.2em;
 }
 .guestbookQuote {
   color: #000;
   font-size: 1.1em;
 }
 .guestbookAuthor {
   color: #cecece;
   font-size: 1em;
   font-style: italic;
 }
 .propertyName {
   color: #69A2C8;
   font-size: 1.4em;
 }
 .propertyStrapLine {
   color: #666;
   font-size: 1em;
   font-style: italic;
 }
 .propertyText {
   color: #888;
   font-size: 0.9em;
 }
 .owner {
   border: 0px solid red;
 }
 /* FONTS & SIZE */
 /* body */
 body {
   font-family: verdana;
 }
 /* titles */
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 .h1,
 .h2,
 .h3,
 .h4,
 .h5,
 .h6 {
   text-transform: uppercase;
   font-family: verdana;
 }
 h1,
 .h1 {
   font-size: 1.8em;
   letter-spacing: 2px;
 }
 h2,
 .h2 {
   font-size: 1.6em;
   letter-spacing: 2px;
 }
 h3,
 .h3 {
   text-transform: capitalize;
   font-size: 1.4em;
   letter-spacing: 1px;
 }
 h4,
 .h4 {
   font-size: 1.3em;
   letter-spacing: 1px;
 }
 h5,
 .h5 {
   font-size: 1.2em;
   letter-spacing: 1px;
 }
 h6,
 .h6 {
   font-size: 1.1em;
   letter-spacing: 1px;
 }
 /* paragraph */
 p {
   font-size: 1em;
   line-height: 1.6;
 }
 /* nav */
 .navbar-default {
   font-size: 1.05em;
   letter-spacing: 6px;
   text-weight: bold;
   text-transform: uppercase;
 }
 /* brand */
 .brand-name {
   font-family: times;
   font-size: 2.8em;
 }
 .brand-subname {
   font-family: times;
   font-size: 1em;
 }
 .brand-strapline {
   font-size: 1.4em;
 }
 /* image */
 .img-border {
   border: #999999 solid 1px;
 }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container Prop_Name" style="">
  <div class="row">
    <div class="col-md-12 text-center">
      <p class="brand-name">ShowCase <span class="brand-subname">beach house</span>

      </p>
    </div>
  </div>
</div>
<!-- /.container -->
<div class="container Prop_StrapLine" style="">
  <div class="row">
    <div class="col-md-12 text-center">
      <p class="brand-strapline">One of the best in Hyams - infinity pool and private beach access</p>
    </div>
  </div>
</div>
<!-- /.container -->
<!-- NAV BAR -->
<div class="text-center">
  <nav class="navbar navbar-default" role="navigation">
    <div class="container Prop_NavBar" style="">
      <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>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="/Template/index.php?Menu=home">home</a>

          </li>
          <li class=""><a href="/Template/index.php?Menu=features">features</a>

          </li>
          <li class=""><a href="/Template/index.php?Menu=activities">activities</a>

          </li>
          <li class=""><a href="/Template/index.php?Menu=gallery">gallery</a>

          </li>
          <li class=""><a href="/Template/index.php?Menu=rates">rates</a>

          </li>
          <li class=""><a href="/Template/index.php?Menu=guestbook">guestbook</a>

          </li>
          <li class=""><a href="/Template/index.php?Menu=map">map</a>

          </li>
          <li class=""><a href="/Template/index.php?Menu=contact">contact</a>

          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>
<!-- BANNER -->
<div class="container Prop_Banner" style="">
  <div class="carousel-container">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators hidden-xs">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
        <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
        <li data-target="#carousel-example-generic" data-slide-to="3" class=""></li>
        <li data-target="#carousel-example-generic" data-slide-to="4" class=""></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="http://www.helloguest.com.au/Admin/zGetImageManip.php?src=http%3A%2F%2Fwww.helloguest.com.au%2FxMedia%2FPicture%2FBigPhotos%2FP000002%2FHG_000035.jpg&w=1200&h=480" alt="image #0">
          <div class="carousel-caption">Main : infinity pool - wines [&copy; ShowCase]</div>
        </div>
        <div class="item ">
          <img src="http://www.helloguest.com.au/Admin/zGetImageManip.php?src=http%3A%2F%2Fwww.helloguest.com.au%2FxMedia%2FPicture%2FBigPhotos%2FP000002%2FHG_000035.jpg&w=1200&h=480" alt="image #1">
          <div class="carousel-caption">Aerial : aerial view [&copy; ShowCase]</div>
        </div>
        <div class="item ">
          <img src="http://www.helloguest.com.au/Admin/zGetImageManip.php?src=http%3A%2F%2Fwww.helloguest.com.au%2FxMedia%2FPicture%2FBigPhotos%2FP000002%2FHG_000035.jpg&w=1200&h=480" alt="image #2">
          <div class="carousel-caption">Exterior : house - beach night [&copy; ShowCase]</div>
        </div>
        <div class="item ">
          <img src="http://www.helloguest.com.au/Admin/zGetImageManip.php?src=http%3A%2F%2Fwww.helloguest.com.au%2FxMedia%2FPicture%2FBigPhotos%2FP000002%2FHG_000035.jpg&w=1200&h=480" alt="image #3">
          <div class="carousel-caption">Outdoors : north deck [&copy; ShowCase]</div>
        </div>
        <div class="item ">
          <img src="../Admin/zGetImageManip.php?src=http%3A%2F%2Fwww.helloguest.com.au%2FxMedia%2FPicture%2FBigPhotos%2FP000002%2FHG_000051.jpg&w=1200&h=480" alt="image #4">
          <div class="carousel-caption">Outdoors : upper level - night [&copy; ShowCase]</div>
        </div>
      </div>
      <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>

    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

最简单的方法是添加＆＃34; z-index：9999;＆＃34;对于carousal锚的风格属性。

最好的方法是完全区分导航栏和转盘。

相关问题
最新问题