屏幕缩小右边这一块怎么消失了？

屏幕缩小右边这一块怎么消失了？

<!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">
 <title>Bootstrap作业</title>
 <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
 <content>
  <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <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="#"><img src="img/logo.png"></a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
           <li><a href="#" class="active">首页</a></li>
           <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">生日<span class="caret"></span></a>
            <ul class="dropdown-menu">
             <div class="pull-left">
              <li><a href="#" class="menu-hader">关系</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">朋友</a></li>
              <li><a href="#">爱人</a></li>
              <li><a href="#">姐妹</a></li>
            </div>
            <div class="pull-left">
             <li><a href="#" class="menu-hader">风味</a></li>
             <li role="separator" class="divider"></li>
             <li><a href="#">巧克力</a></li>
             <li><a href="#">水果</a></li>
           </div>
         </ul>
       </li>
       <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">婚礼<span class="caret"></span></a>
        <ul class="dropdown-menu">
         <div class="pull-left">
          <li><a href="#" class="menu-hader">关系</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">朋友</a></li>
          <li><a href="#">爱人</a></li>
          <li><a href="#">姐妹</a></li>
        </div>
        <div class="pull-left">
          <li><a href="#" class="menu-hader">风味</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">巧克力</a></li>
          <li><a href="#">水果</a></li>
        </div>
        <div class="pull-left">
          <li><a href="#" class="menu-hader">主旋律</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">心形</a></li>
          <li><a href="#">卡通</a></li>
        </div>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">专用<span class="caret"></span></a>
      <ul class="dropdown-menu">
       <div class="pull-left">
        <li><a href="#" class="menu-hader">关系</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">朋友</a></li>
        <li><a href="#">爱人</a></li>
        <li><a href="#">姐妹</a></li>
      </div>
      <div class="pull-left">
        <li><a href="#" class="menu-hader">风味</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">巧克力</a></li>
        <li><a href="#">水果</a></li>
      </div>
    </ul>
  </li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">商铺<span class="caret"></span></a>
    <ul class="dropdown-menu">
     <div class="pull-left">
      <li><a href="#" class="menu-hader">关系</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">朋友</a></li>
      <li><a href="#">爱人</a></li>
      <li><a href="#">姐妹</a></li>
    </div>
    <div class="pull-left">
      <li><a href="#" class="menu-hader">风味</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">巧克力</a></li>
      <li><a href="#">水果</a></li>
    </div>
  </ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-zoom-out" aria-hidden="true"></span></a>
    <ul class="dropdown-menu sou">
      <li></li>
      <input type="text" name=""><button>搜</button>
    </ul>
  </li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-user" aria-hidden="true"></span></a>
    <ul class="dropdown-menu denglu">
      <li></li>
      <p class="dl">
        <p class="email">Email</p>
        <input class="text" type="text" name="">
         <p class="password">Password</p>
        <input class="text" type="text" name=""><br><br>
        <input class="dl" type="button" name="" value="登录">
        <input class="checkbox" type="checkbox" name="">
        <p class="center">新用户？<a href="#">注册</a>|忘记密码?</p>
      </p>
    </ul>
  </li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></a>
    <ul class="dropdown-menu gwc">
      <li></li>
      <span>$0.00(0)</span>
      <button>空</button>
    </ul>
  </li>
</ul>
     <!--  <ul class="nav navbar-nav navbar-right">
       
      
       
     </ul> -->
   </div><!-- /.navbar-collapse -->
 </div><!-- /.container-fluid -->
</nav>
</content>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7-dist//js/bootstrap.min.js"></script>
</body>
</html>








*{
 padding: 0;
 margin: 0;
}
.navbar-default{
 width: 100%;
 height: 52px;
 background: #5D4B33;  
}
.container-fluid{
 width: 90%;
}
.navbar-brand{
 margin-top:-8px;
}
.navbar-nav{
 width: 400px;
 margin-left: 100px;
}
.active{
 background: orange;
}
.navbar-nav li:hover{
 background: orange;
 transition: all 1s;
}
.dropdown-menu{
 width: 400px;
 height: 150px;
}
.dropdown-menu div:nth-child(1){
 margin-top: 10px;
 margin-left: 20px;
}
.dropdown-menu div:nth-child(2){
 margin-top: 10px;
 margin-left: 60px;
}
.dropdown-menu div:nth-child(3){
 margin-top: 10px;
 margin-left: 60px;
}
.pull-left li:hover{
 background: #fff;
}
.menu-hader{
 color: orange;
}
.pull-left li a{
 text-decoration: none;
}
.pull-left li a:hover{
 color: orange;
}
.navbar-right .dropdown:hover{
 background: none;
}
.glyphicon{
 color: #fff;
}
.sou{
 width: 250px;
 height: 80px;
}
.sou li{
 display: block;
    width: 0;
    height: 0;
    border-width: 0 15px 15px;
    border-style: solid;
    border-color: transparent transparent #fff;
    top: -14px;
    right: 7px;
    position: absolute;
}
.sou input{
 width: 130px;
    height: 30px;
    border: 1px solid orange;
    margin-left:30px;
    margin-top: 20px;
}
.sou button{
 width: 50px;
 height: 30px;
 background: orange;
 color: #fff;
 border:none;
}
.denglu{
 width: 220px;
    height: 240px;
    overflow-y: auto;
}
.denglu .password,.denglu .email{
    font-weight: bold;
}
.denglu .text{
    width:200px;
    height: 30px;
}
.dl{
 width:200px;
 height: 30px;
 background: orange;
 color: #fff;
 border: none;
}
.dl:hover{
 background: #fff;
 color: orange;
 transition: all 1s;
}
.checkbox{
 width: 30px;
 height: 30px;
}
.center{
 text-align: center;
}
.gwc{
 width: 300px;
 height: 90px;
}
.gwc span{
 display: block;
 text-align: center;
}
.gwc button{
 width: 200px;
 height: 30px;
 background: #fff;
 border:1px solid orange;
 color: orange;
 margin-left: 50px;
 margin-top: 15px;
}
.gwc li{
 display: block;
    width: 0;
    height: 0;
    border-width: 0 15px 15px;
    border-style: solid;
    border-color: transparent transparent #fff;
    top: -14px;
    right: 7px;
    position: absolute;
}
慕后端8593059 2018-12-12
源自：项目：实现企业网站首页   2-7 作业题
0
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

2回答
提问者 慕后端8593059 2018-12-12 18:29:29

缩小后购物车那一块消失了  麻烦给看看

0
收起回答
  • 好帮手慕星星 #1
    右侧三个小图标都显示在了下拉菜单中，可以按照老师的修改建议调整下。
    2018-12-12 19:32:27
好帮手慕星星 2018-12-12 17:53:29

右边没有消失，是显示在了下拉菜单中：

http://img1.sycdn.imooc.com//climg/5c10d8a90001afae05860506.jpg

代码中使用的是官网的例子，官网中的例子就是浏览器缩小之后，右侧的内容显示在了下拉菜单中，是把nav标签中所有的内容变成了下拉菜单。所以建议把右侧内容从nav标签中分离出来，如下布局：

http://img1.sycdn.imooc.com//climg/5c10d9fd0001ad2708890197.jpg

自己调整布局和样式测试下。

祝学习愉快！

0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

完成缩放手势
27 0 5
浏览器窗口拉小，banner布局就乱了
8 0 3
右边区块没有固定，会变小
16 0 6
为什么缩小网页左右两边会消失呢
6 0 1
为什么right：-80px；红色块会紧贴蓝色块右边？
30 0 7

登录后可查看更多问答，登录/注册

响应式开发与常用框架 2018
  • 参与学习           人
  • 提交作业       2198    份
  • 解答问题       5012    个

如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！

了解课程

本课精华内容

问答 作业

图片高度不一样的问题

45 24

请问老师原理是什么

70 16

请问老师到底是什么机制

44 12

我的js为什么绑定不上啊

0 11

请问这个怎么解释

44 11

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师