Question

我想用输入+下拉列表+按钮

创建输入组

<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制作圆角。如果我改变顺序（用下拉按钮交换简单按钮并将类.dropdown-toggle添加到下拉列表），那么行为就是我想要的。

那么我需要将哪个类添加到简单的按钮以使其向右舍入？（我认为将类.dropdown-toggle添加到简单按钮不是很好的解决方案）

Answer 1

如果您有本地StyleSheet：

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

否则，还有一个css类类型，通常用于名为“well”且具有border-radius的页脚，

它的oldschool Bootstrap（我通常会避免它，因为它被滥用）但你可以根据自己的需要回收它

.well-sm或.well-small应该做的伎俩

在右侧添加圆角到Bootstrap分段输入组

1 个答案: