Question

我想使用我从bootstrap网站修改的输入组。

这就是我所拥有的

Current design

这就是我想要的

Wanted design

这是我的代码

<div class="input-group">
    <input type="text" aria-label="Text input with segmented button dropdown" class="form-control">
    <div class="input-group-btn">
        <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
            <span class="caret"></span>
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider" role="separator"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
        <button class="btn btn-default" type="button">Action</button>
    </div>
</div>

我做错了什么？这是一个小提琴https://jsfiddle.net/r7ttxr6p/3/

Answer 1

Bootstrap没有css。把它放在你的CSS中：

.input-group-btn:last-child > .btn:not(:last-child).dropdown-toggle {
  border-radius: 0;
}

http://jsfiddle.net/ubdoyn6z/1/

Answer 2

我希望你喜欢这个。弄清楚是非常烦人的。文档在这种类型的标记上并不是最好的。 https://jsbin.com/zabocusiti/edit?html,output

<div class="input-group">
  <input class="form-control" aria-label="Text input with segmented button dropdown" type="text"/>

  <div class="input-group-btn">

    <button type="button" class="btn btn-default " data-toggle="dropdown" aria-haspopup="true" >
      <span class="caret"></span>
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>

    <button type="button" class="btn btn-default">Action</button>

  </div>

</div><!-- /.input-group -->

Answer 3

<div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
      <div class="input-group-btn">

        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="caret"></span>
          <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
        <button type="button" class="btn btn-default">Action</button>
      </div>
    </div>

https://jsfiddle.net/zz1k5t3u/

Bootstrap输入组未正确分组

3 个答案: