输入组中缺少Bootstrap 3边界半径

Question

使用Bootstrap 3.4为什么输入组缺少所有边界半径？

<form action="{{ route('dashboard.users.index') }}" method="get">
   <div class="input-group">
        <input type="text" name="search" class="form-control">
        <span class="input-group-btn">
           <button class="btn btn-default" type="submit">
             <i class="fa fa-search"></i>
           </button>
         </span>
     </div>
</form>

检查元素：

.input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child>.btn, .input-group-btn:first-child>.btn-group>.btn, .input-group-btn:first-child>.dropdown-toggle, .input-group-btn:last-child>.btn-group:not(:last-child)>.btn, .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

我应该用自己的CSS修复它吗？

Answer 1

看起来是设计使然。查看图片（我使用了您的标记，只是将内部文本添加到<i class="fa fa-search"></i>中）：

您连续有两个输入。外角有边界半径，而内角则没有边界半径。而且看起来还不错。如果您需要覆盖该行为，则需要创建自己的CSS，以覆盖默认样式。

Answer 2

我正在使用bootstrap rtl，当顺序更改时我不小心把它放在了原始的bootstrap.min.css之前..问题已解决..谢谢您的帮助