课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

轮播图最大的div 和 item 的高度不能自适应

来源：3-5 滚动图片广告

qq_繁华_6

2018-06-09 12:58

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>浏览器博物馆</title>

    <!-- Bootstrap -->

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!--[if lt IE 9]>

      <script src="js/html5shiv.min.js"></script>

      <script src="js/respond.min.js"></script>

    <![endif]-->

    

    

    <style type="text/css">

     .carousel{

     height: 500px;

     background: #000000;

     }

     

     .carousel .item{

     height: 500px;

     background: #000000;

     }

     

     .carousel img{

     width: 100%;

     }

    </style>

  </head>

  <body>

    <!--定义导航栏-->

    <nav class=" navbar-default navbar-inverse" role="navigation">

     <!--自适应宽度还是固定居中宽度  container-fluid/container-->

    <div class="container">

   

    <div class="navbar-header">

     <!--宽度变小后缩小成图标-->

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target = "#bs-example-navbar-collapse-1">

         <!--意为：（仅供）屏幕阅读器，这个 class 主要用于增强 accessbility（可访问性）。-->

         <span class="sr-only">Toggle navigation</span>

         <span class="icon-bar"></span>

         <span class="icon-bar"></span>

         <span class="icon-bar"></span>

        </button>

        <!--logo  商标-->

        <a class="navbar-brand" href="#">浏览器博物馆</a>

    </div>

    <!--缩小后可折叠-->

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

     <!--折叠的内容-->

        <ul class="nav navbar-nav" role="navigation">

            <li class="active"><a href="#">综述</a></li>

            <li><a href="#">简述</a></li>

            <!--下拉菜单-->

            <li class="dropdown">

             <a href="#" class="dropdown-toggle" data-toggle="dropdown">特点<span class="caret"></span></a>

            

             <ul class="dropdown-menu" role="menu">

             <!--<li class="divider"></li>  加横线-->

             <li><a href="#">Chrome</a></li>

             <li><a href="#">Firefox</a></li>

             <li><a href="#">Opera</a></li>

             <li><a href="#">Safari</a></li>

             <li><a href="#">IE</a></li>

             </ul>

            </li>

            <li class="dropdown"><a href="#">关于</a></li>

        </ul>

    </div>

    </div>

</nav>

    

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

  <!-- Indicators -->

  <ol class="carousel-indicators">

    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

    <li data-target="#carousel-example-generic" data-slide-to="1"></li>

    <li data-target="#carousel-example-generic" data-slide-to="2"></li>

  </ol>


  <!-- Wrapper for slides -->

  <div class="carousel-inner" role="listbox">

    <div class="item active">

      <img src="images/chrome-big.jpg" alt="...">

      <div class="carousel-caption">

        ...

      </div>

    </div>

    <div class="item">

      <img src="images/firefox-big.jpg" alt="...">

      <div class="carousel-caption">

        ...

      </div>

    </div>

    

    <div class="item">

      <img src="images/opera-big.jpg" alt="...">

      <div class="carousel-caption">

        ...

      </div>

    </div>

    ...

  </div>


  <!-- Controls -->

  <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>

    

    

    

    

    

    

    

    

    


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->

    <script src="js/jquery-1.11.1.min.js"></script>

    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

    <script src="js/bootstrap.min.js"></script>

    

    <script type="text/javascript">

     $(document).click(function(){

    

     })

    </script>

  </body>

</html>


写回答 关注

1回答

  • itachy
    2018-06-11 22:36:17

    <div class="container">

    </div>要放在最外面   其他的没问题



    <!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
   <title>浏览器博物馆</title>
   <!-- Bootstrap -->
   <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
   <style type="text/css">
      .carousel {
         height: 500px;
         background: #000000;
      }

      .carousel .item {
         height: 500px;
         background: #000000;
      }

      .carousel img {
         width: 100%;
      }
   </style>
</head>
<body>

<!--定义导航栏-->
<div class="container">
   <nav class=" navbar-default navbar-inverse" role="navigation">
      <!--自适应宽度还是固定居中宽度  container-fluid/container-->

      <div class="navbar-header">
         <!--宽度变小后缩小成图标-->
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                 data-target="#bs-example-navbar-collapse-1">
            <!--意为：（仅供）屏幕阅读器，这个 class 主要用于增强 accessbility（可访问性）。-->
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
         </button>
         <!--logo  商标-->
         <a class="navbar-brand" href="#">浏览器博物馆</a>

      </div>

      <!--缩小后可折叠-->

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

         <!--折叠的内容-->

         <ul class="nav navbar-nav" role="navigation">

            <li class="active"><a href="#">综述</a></li>

            <li><a href="#">简述</a></li>

            <!--下拉菜单-->

            <li class="dropdown">

               <a href="#" class="dropdown-toggle" data-toggle="dropdown">特点<span class="caret"></span></a>


               <ul class="dropdown-menu" role="menu">

                  <!--<li class="divider"></li>  加横线-->

                  <li><a href="#">Chrome</a></li>

                  <li><a href="#">Firefox</a></li>

                  <li><a href="#">Opera</a></li>

                  <li><a href="#">Safari</a></li>

                  <li><a href="#">IE</a></li>

               </ul>

            </li>

            <li class="dropdown"><a href="#">关于</a></li>

         </ul>

      </div>


   </nav>


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

      <!-- Indicators -->

      <ol class="carousel-indicators">

         <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

         <li data-target="#carousel-example-generic" data-slide-to="1"></li>

         <li data-target="#carousel-example-generic" data-slide-to="2"></li>

      </ol>


      <!-- Wrapper for slides -->

      <div class="carousel-inner" role="listbox">

         <div class="item active">

            <img src="http://img.mukewang.com/5412ad400001e52014280484.jpg" alt="...">

            <div class="carousel-caption">
               ...
            </div>
         </div>
         <div class="item">
            <img src="http://img.mukewang.com/5412ad7c0001d2eb10880541.jpg" alt="...">
            <div class="carousel-caption">
               ...
            </div>
         </div>
         <div class="item">
            <img src="http://img.mukewang.com/5412ae5c0001653b12800644.jpg" alt="...">
            <div class="carousel-caption">
               ...
            </div>
         </div>
         ...
      </div>
      <!-- Controls -->
      <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>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


<script type="text/javascript">

   $(document).click(function () {

   })

</script>

</body>

</html>


    0 0

基于bootstrap的网页开发

Bootstrap框架的基础教程，学会用Bootstrap前端框架搭建网页

187668 学习 · 734 问题

查看课程

相似问题

如何控制轮播图标和轮播图里的字体大小自适应移动端

回答 3

轮播图不能占到100%宽度

回答 2

我的图片不能轮播

回答 2

图片自适应

回答 1

自定义container宽度后，不自适应？

回答 1

打开慕课网App查看更多内容