如何在Bootstrap中并排放置输入和下拉菜单？

Safder 发表于 Dev

萨夫德

引导程序的新手，并且一直在为此实现而苦苦挣扎。我想输入一个文本，并在下拉菜单中插入没有边距的开关，但是我似乎无法弄清楚。

这就是我想要的样子：

<div class="row">
  <div class="col">
    <input type="text" class="form-control" placeholder="60" disabled>
  </div>
  <div class="col"><button class="btn btn-secondary dropdown-toggle btn-square-only" disabled>months</button>
  </div>
</div>

这就是我得到的。btn-square-only只是样式功能，除此之外没有其他功能。有任何想法吗？

任何指导，不胜感激。

拉伊什·阿拉姆

您可以按照下面Bootstrap的结构和定义的宽度，只要你想，所以我定义width-150px用了类150px width的输入组股利。

.width-150px{
  width: 150px!important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container my-4">
  <div class="row">
    <div class="col">
      <div class="input-group width-150px">
        <input type="text" class="form-control text-center rounded-0" placeholder="60" disabled>
        <div class="input-group-append">
          <button class="btn btn-outline-secondary dropdown-toggle rounded-0" type="button" data-toggle="dropdown" disabled>Month</button>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">January</a>
            <a class="dropdown-item" href="#">February</a>
            <a class="dropdown-item" href="#">March</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。