Question

我有我的网站，它正在寻找并看起来像这样。

但当我缩小100％到25％时，它看起来像这样。

应该在哪里问题???并且它在Firefox中缩小了很好但在chrome中有问题...我正在使用bootstrap和滑块是carousel.and我的html标题菜单来了。

<body>
<!-- header-section-starts -->
        <div class="home">
                <a href="index.php"><span class="glyphicon glyphicon-home"></span></a>
        </div>
        <div class="header-top">
            <div class="social-icons">
                <a href="https://www.facebook.com/Jacklin-Leather-Pvt-Ltd-1661694880710794" target="_blank"><i class="facebook"></i></a>
                <a href="https://www.twitter.com/divyjesadiya" target="_blank"><i class="twitter"></i></a>
                <a href="https://plus.google.com/+DivyeshJesadiya" target="_blank"><i class="googlepluse"></i></a>
            </div>
            <span class="menu"><img src="images/nav.png" alt=""/></span>
            <div class="top-menu">
                <ul>
                <nav class="cl-effect-13">
                    <li><a href="about.php" id="about">About</a></li>
                    <li><a href="product.php" id="product">Products</a></li>
                    <li><a href="showroom.php" id="showroom">E-Showroom</a></li>
                    <li><a href="contact.php" id="contact">Contact Us</a></li>
                    <li><a href="typography.php" target="_blank" id="typo">E-Catalog</a></li>
                </nav>
                </ul>
            </div>
            <!-- script for menu -->
                <script> 
                    $( "span.menu" ).click(function() {
                    $( ".top-menu ul" ).slideToggle( 300, function() {
                     // Animation complete.
                    });
                    });
                </script>
            <!-- //script for menu -->
            <div class="clearfix"></div>
        </div>
        <div class="clearfix"></div>
<!-- header-section-ends -->

和滑块是。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div data-example-id="simple-carousel" class="bs-example">
<div data-ride="carousel" class="carousel slide" id="carousel-example-generic">
<ol class="carousel-indicators">
  <li class="active" data-slide-to="0" data-target="#carousel-example-generic"></li>
  <li data-slide-to="1" data-target="#carousel-example-generic"></li>
  <li data-slide-to="2" data-target="#carousel-example-generic"></li>
  <li data-slide-to="3" data-target="#carousel-example-generic"></li>
</ol>
<div role="listbox" class="carousel-inner">
  <div class="item active">
    <img alt="im1" src="images/slide/im1.jpg"
    data-holder-rendered="true">
  </div>
  <div class="item">
    <img alt="im2" src="images/slide/im2.jpg"
    data-holder-rendered="true">
  </div>
  <div class="item">
    <img alt="im3" src="images/slide/im3.jpg"
    data-holder-rendered="true">
  </div>
  <div class="item">
    <img alt="im4" src="images/slide/im4.jpg"
    data-holder-rendered="true">
  </div>
</div>
<a data-slide="prev" role="button" href="#carousel-example-generic" class="left carousel-control">
  <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
  <span class="sr-only">Previous</span>
</a>
<a data-slide="next" role="button" href="#carousel-example-generic" class="right carousel-control">
  <span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
  <span class="sr-only">Next</span>
  </a>
  </div>
  </div>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

和标题的css是。

.home{
float:left;
width:20%;
background: #22292F;
padding: 1.44em 1em;
position: relative;
}
span.glyphicon.glyphicon-home {
margin-top: -6px;
font-size: 21px;
color: #fff;
float: right;
}
.top-menu{
float:left;
margin-top:9px;
}
    .cl-effect-13 a {
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;
}

.cl-effect-13 a::before {
position: absolute;
top: 20%;
left: 50%;
color: transparent;
content: '.';
text-shadow: 0 0 transparent;
font-size: 1.2em;
-webkit-transition: text-shadow 0.3s, color 0.3s;
-moz-transition: text-shadow 0.3s, color 0.3s;
transition: text-shadow 0.3s, color 0.3s;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
pointer-events: none;
}

.cl-effect-13 a:hover::before,
.cl-effect-13 a:focus::before {
color: #0078B5;
text-shadow: 10px 0 #fff, -10px 0 #fff;
}

.cl-effect-13 a:hover,
.cl-effect-13 a:focus {
color: #FFFFFF;
}

/* Effect 14: border switch */
.cl-effect-14 a {
padding: 0 20px;
height: 45px;
line-height: 45px;
}
.social-icons{
float:right;
margin-right: 22%;
}
.social-icons i{
width:35px;
height:35px;
background: url('../images/img-sprite.png') no-repeat 0px 0px;
display:inline-block;
cursor:pointer;
}
.social-icons i:hover {
opacity: 0.5;
}
i.facebook{
background-position:0px 0px;
}
i.twitter{
background-position:-40px 0px;
}
i.googlepluse{
background-position:-80px 0px;
}
.top-menu ul li{
display:inline-block;
}
.top-menu ul li a{
color:#fff;
font-weight:400;
font-size:22px;
text-decoration:none;
margin:-5px 15px;
font-family: 'Myriad ProPoP', times, sans-serif;
}
@media (max-width: 1200px) {
.top-menu ul li a{
    font-size:18px;
    margin:0 15px;
}
}

@media (max-width: 992px) {
.top-menu ul li a{
    font-size:18px;
    margin:0 8px;
}
}
.top-menu ul li a:hover{
color: #0078B5;
}
.top-menu ul li a.active{
color: #0078B5;
}
.header-top {
background: #22292F;
padding: .5em 15px;
float: left;
width: 80%;
position: relative;
}

请帮帮我。

Answer 1

对于滑块，您只是错过了container div。

所以改变你的

<div data-example-id="simple-carousel" class="bs-example">
  <div data-ride="carousel" class="carousel slide" id="carousel-example-generic">
    <ol class="carousel-indicators">
      <li class="" data-slide-to="0" data-target="#carousel-example-generic"></li>
      <li data-slide-to="1" data-target="#carousel-example-generic" class=""></li>
      <li data-slide-to="2" data-target="#carousel-example-generic" class="active"></li>
      <li data-slide-to="3" data-target="#carousel-example-generic" class=""></li>
    </ol>
    <div role="listbox" class="carousel-inner">
      <div class="item">
        <img alt="im1" src="images/slide/im1.jpg" data-holder-rendered="true">
      </div>
      <div class="item">
        <img alt="im2" src="images/slide/im2.jpg" data-holder-rendered="true">
      </div>
      <div class="item active">
        <img alt="im3" src="images/slide/im3.jpg" data-holder-rendered="true">
      </div>
      <div class="item">
        <img alt="im4" src="images/slide/im4.jpg" data-holder-rendered="true">
      </div>
    </div>
    <a data-slide="prev" role="button" href="#carousel-example-generic" class="left carousel-control">
      <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a data-slide="next" role="button" href="#carousel-example-generic" class="right carousel-control">
      <span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

到

<div class="container">
<div data-example-id="simple-carousel" class="bs-example">
  <div data-ride="carousel" class="carousel slide" id="carousel-example-generic">
    <ol class="carousel-indicators">
      <li class="" data-slide-to="0" data-target="#carousel-example-generic"></li>
      <li data-slide-to="1" data-target="#carousel-example-generic" class=""></li>
      <li data-slide-to="2" data-target="#carousel-example-generic" class="active"></li>
      <li data-slide-to="3" data-target="#carousel-example-generic" class=""></li>
    </ol>
    <div role="listbox" class="carousel-inner">
      <div class="item">
        <img alt="im1" src="images/slide/im1.jpg" data-holder-rendered="true">
      </div>
      <div class="item">
        <img alt="im2" src="images/slide/im2.jpg" data-holder-rendered="true">
      </div>
      <div class="item active">
        <img alt="im3" src="images/slide/im3.jpg" data-holder-rendered="true">
      </div>
      <div class="item">
        <img alt="im4" src="images/slide/im4.jpg" data-holder-rendered="true">
      </div>
    </div>
    <a data-slide="prev" role="button" href="#carousel-example-generic" class="left carousel-control">
      <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a data-slide="next" role="button" href="#carousel-example-generic" class="right carousel-control">
      <span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
</div>

对于Navbar，您可能需要对其进行重组。请按照https://getbootstrap.com/examples/navbar/

中的示例进行操作

修改

因为您希望滑块占据全屏... 当前缩小时，您的图像太小，无法占据全屏。那么让我做一个小小的CSS hack ......

.carousel-inner>.item>img { width: 100%; }

如果希望滑块保持纵横比，缩小时缩小

.carousel-inner>.item>img { line-height: 1; width: 100%; object-fit: cover; height: 500px; /**This could be any height you prefer***/ }

缩小不适用于Google Chrome

1 个答案: