Question

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

常规按钮（显示确定）：

<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的“功能”，还是我做错了什么？

谢谢。

Answer 1

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

查看.no-right-border和.btn-drop-down CSS。

.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>

注意，我在按钮元素的class属性中添加了类。

将border-radius更改为0，将border-right更改为零将获得所需的效果。

输入组上的下拉按钮显示不正确

1 个答案: