html - 为什么我的引导下拉菜单占据了网站的整个宽度，即使它很小

Question

我使用以下代码创建了一个下拉菜单和一个输入框表单:

  <div class="container-fluid">
    <div class="dropdown">
          <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            2
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu dropdown-info" aria-labelledby="dropdownMenu1">
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
          </ul>
        </div>
        <input type="text" name="" value="">
</div>

我申请的css是:

body {
  background-color: #b6e6bd;
  line-height: 1.6;
}

/* Containers */
.container-fluid {
  padding: 1% 20%;
  margin: auto;
  text-align: center;
}

但是，下拉菜单占据了网站的整个宽度，空白输入框显示在同一行上。我没有做任何设计按钮的事情。有人可以帮忙吗，我需要他们出现在同一行。

Answer 1

因为，dropdown 是一个 div，而 div 是一个块 see examples
您需要使用 网格或 btn-group
或者使用 flex 自定义方法:

<div class="group">
  <div class="cell">Dropdown</div>
  <div class="cell">Input</div>
</div>
<style>
  .group {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
  }
</style>