时间戳

首页 > 解决方案 > 输入组上的下拉按钮未正确显示

bootstrap-4 - 输入组上的下拉按钮未正确显示

问题描述

我正在尝试使用输入文本和两个按钮创建和输入组，其中一个是下拉按钮。使用两个常规按钮，输入组正确显示，但下拉菜单未正确绘制角。

常规按钮（显示 OK）：

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4">
  <div class="input-group-append" id="button-addon4">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

使用下拉菜单（显示不正确）：

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4">
  <div class="input-group-append" id="button-addon4">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

你可以在这里看到它：https ://jsfiddle.net/goncalomarrafa/ecg6o4m5/3/

这是 Bootstrap 的“功能”还是我做错了什么？

提前致谢。

标签： bootstrap-4

解决方案

我已将您的代码更新为以下内容，并使用 CSS 修复了下拉按钮的“弯曲”部分：

看看.no-right-border和.btn-drop-downCSS。

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.btn-drop-down {
  border-radius: 0 !important;
}

.no-right-border {
  border-right: 0 !important;
}

下拉按钮的 html 应该是：

<button class="btn btn-outline-secondary dropdown-toggle btn-drop-down no-right-border" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>

请注意，我将类添加到按钮元素的类属性中。

更改border-radius为 0 和border-right零可以获得所需的效果。

推荐阅读