html - 在 Bootstrap Segmented 输入组右侧添加圆 Angular

Question

我想用 input + dropdown + button 创建输入组

http://jsfiddle.net/eRzDq/127/这是我的例子

<div class="col-md-10">    
    <h3 id="btn-groups-single">Segmented dropdown groups</h3>        
    <div class="input-group">
        <input type="text" class="form-control " placeholder="username"/>

      <div class="input-group-btn">
          <!--simple button-->   
          <button type="button" class="btn btn-default" data-toggle="dropdown">
              <span class="caret"></span>
          </button>
          <button type="button" class="btn btn-default">Simple</button>
          <!--dropdown button-->    
          <ul class="dropdown-menu">
              <li><a href="#">Dropdown link</a></li>
              <li><a href="#">Dropdown link</a></li>
          </ul>
      </div>      
    </div>    
  </div>  

我的问题是我不知道如何为 Simple-Button 制作圆 Angular 。如果我更改顺序(将简单按钮与下拉按钮交换并将类 .dropdown-toggle 添加到下拉列表)，那么行为就是我想要的。

那么我需要将什么类添加到简单按钮以使其向右圆 Angular ？ (我认为将类 .dropdown-toggle 添加到简单按钮不是好的解决方案)

Answer 1

如果您有本地样式表:

.btn { border-top-right-radius: 5px;
       border-bottom-right-radius: 5px; }

---

否则还有一个通常用于页脚的 css 类类型，称为 well 并具有 border-radius，

这是老式的 Bootstrap(我通常避免使用它，因为它被滥用了)但你可以根据需要回收它

.well-sm 或 .well-small 应该可以解决问题