老师，为什么在导航栏的.dropdown-menu的宽度为什么不是两个浮动的子元素宽度的和？

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

<!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 href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css.css">
</head>
<body>
<!-- 导航栏 -->
<section class="pageHead">
<div class="container">
<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="#">Brand</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 class="active"><a href="#">首页 <span class="sr-only">(current)</span></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 dmOne">
           <div>
           <li><a href="#">关系</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>
           <li><a href="#">风味</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>
           <li><a href="#">关系</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>
           <li><a href="#">风味</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">巧克力</a></li>
            <li><a href="#">水果</a></li>
           </div>
           <div>
           <li><a href="#">主旋律</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 dmOne">
           <div>
           <li><a href="#">关系</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>
           <li><a href="#">商铺</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 dmOne">
           <div>
           <li><a href="#">关系</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>
           <li><a href="#">风味</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><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
 
</div>
</section>
 
 
 
    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

css

.pageHead{
    height: 100px;
    background-color: #5D4B33;
}
/*导航头部的下拉菜单样式*/
.dropdown-menu div {float: left;margin:20px 20px;width:190px;}
.dropdown-menu div li:first-child a{font-size: 16px;color:#f07818;}
.dropdown-menu div li a{color:grey;text-decoration: none;}
.dropdown-menu div li a:hover{color:#f07818;}

aleeeeex 2019-03-19

源自：项目：实现企业网站首页 2-7 作业题

收起

2回答

好帮手慕星星 2019-03-19 17:13:04

最小宽度不是限制父元素宽度的上限，bootstrap中设置min-width为160px，但是div盒子为190px，还有左右的边距，显示出来宽度是232px，仍然把父容器撑大了：

只不过这个效果特殊，里面是浮动的。这种情况只能一个撑起来，不会所有显示在一行来撑开。

收起回答

好帮手慕星星 2019-03-19 13:25:39

你好，同学的意思是内容没有在一行显示吗

这是因为bootstrap中设置了dropdown-menu的最小宽度160px：

子元素div一个宽度为190px，超出了最小宽度，可以将父容器撑起来，但是不会在一行显示。

可以调整dropdown-menu盒子的最小宽度大于子元素盒子的宽度，或者直接设置盒子宽度，参考：

祝学习愉快！

收起回答

提问者 aleeeeex #1

我设置两个子元素左浮动，那么父元素的宽度应该被撑起来大于160px呀，最小宽度160px的意思不是限制父元素不能小于160px吗,那本来就没有小于160px啊，不是很理解。

2019-03-19 15:40:05
好帮手慕星星回复提问者 aleeeeex #2

如果子内容的宽度加起来不超过最小宽度，两个子内容就会显示在一行，如果超过了最小宽度，只会把父容器撑开一个子内容的宽度，不会两个加起来一起撑开，所以也不会显示在一行。

2019-03-19 16:25:59
提问者 aleeeeex #3

那最小宽度就是限制父元素的宽度上限吗？

2019-03-19 17:00:06