css - 如何减小 Bootstrap 中掉落元素容器的大小

标签 css twitter-bootstrap

我想减小下拉容器的大小,但我无法这样做我已经编写了以下代码,但它已无法使用如果有人知道解决方案,请提供帮助。

<!DOCTYPE html>
    <html>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="container">             
      <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
        <span class="caret"></span></button>
        <ul class="dropdown-menu" style="max-width: 40px">
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">JavaScript</a></li>
        </ul>
      </div>
    </div>
    
    </body>
    </html>

最佳答案

我希望这是你想要做的(min-width 被分配给 dropdown ,更改它以调整下拉列表大小,设置宽度)

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">             
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu" style="min-width: 40px">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>
</div>

</body>
</html>

关于css - 如何减小 Bootstrap 中掉落元素容器的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50056572/

相关文章:

jquery - 单击处理程序未在嵌套跨度元素上调用

html - 如何在链接中垂直居中文本

jquery - 黑色覆盖显示在 ie9 中的 html5 视频之上

javascript - 夜间值类。单击带有文本的元素

twitter-bootstrap - React DatePicker Bootstrap 是最新的

html - 解析 HTML 中的 CSS 命名空间

php - 如何显示彼此相邻的四个类别帖子? - WordPress的

javascript - 图像根据移动设备宽度适合 div,无需拉伸(stretch)

javascript - AngularJS -> 查询 "is at bottom of page"

html - Bootstrap 修复特定元素及其子元素的冲突