Question

我正在尝试使用bootstrap创建一组控件但是它似乎没有正确呈现，我在这里有一个示例：https://jsfiddle.net/brightertools/jxafnoyx/

代码：

<form id="form" name="form" action="" method="post">
    <div class="container">
        <div class="form-group">
            <label class="control-label" for="SelectOption">Select an Option</label>
            <div class="input-group">
                <select id="SelectOption" name="SelectOption" class="form-control">
                    <option value="">(select your option)</option>
                </select>
                <div class="input-group-btn ">
                    <button type="button" class="btn btn-default glyphicon glyphicon-plus" style="margin-top:-1px;" id="AddButton"></button>
                    <button type="button" class="btn btn-default dropdown-toggle glyphicon glyphicon-cog" style="margin-top:-1px;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="GroupDropdown"></button>
                    <ul class="dropdown-menu">
                        <li><a id="EditLink">Edit</a>
                        </li>
                        <li><a id="DeleteLink">Delete</a>
                        </li>
                    </ul> <span class="input-group-addon"><span class="validation-icon glyphicon glyphicon-asterisk"></span></span>
                </div>
            </div>
        </div>
    </div>
</form>

可以看到插件正在包装，我似乎无法解决这个问题。

jsfiddle中的当前渲染：

Answer 1

正如 Onkar Deshpande 在评论中正确提及

＆＃34;不支持单个输入组中的多个表单控件＆＃34; 。

Input groups

在输入的任一侧放置一个插件或按钮。您也可以在输入的两侧放置一个。

我们不支持单侧的多个加载项。

我们不支持单个输入组中的多个表单控件。

但是你可以用一些工作来完成这项工作。只需确保将input-group-addon移出input-group-btn div。

要使此外观正确，您还必须删除border-radius类上的.btn。

＆＃13;

.btn {
  border-radius: 0 !important;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<form id="form" name="form" action="" method="post">
  <div class="container">
    <div class="form-group">
      <label class="control-label" for="SelectOption">Select an Option</label>
      <div class="input-group">
        <select id="SelectOption" name="SelectOption" class="form-control">
          <option value="">(select your option)</option>
        </select>
        <div class="input-group-btn ">
          <button type="button" class="btn btn-default glyphicon glyphicon-plus" style="margin-top:-1px;" id="AdvertiserEditButton"></button>

          <button type="button" class="btn btn-default dropdown-toggle glyphicon glyphicon-cog" style="margin-top:-1px;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="AdvertiserDropdown"></button>
          <ul class="dropdown-menu">
            <li><a id="AdvertiserEditLink">Edit</a>
            </li>
            <li><a id="AdvertiserDeleteLink">Delete</a>
            </li>
          </ul>                      
        </div>
        <span class="input-group-addon"><span class="validation-icon glyphicon glyphicon-asterisk"></span></span>
      </div>
    </div>
  </div>
</form>

＆＃13;

Answer 2

您可以尝试这样做： Demo

<div class="input-group">
    <select id="SelectOption" name="SelectOption" class="form-control">
                    <option value="">(select your option)</option>
                </select>   
          <div class="input-group-btn">
              <button type="button" class="btn btn-default "><i class="glyphicon glyphicon-plus"></i></button>
              <button type="button" class="btn btn-default dropdown-toggle " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="AdvertiserDropdown"><i class="glyphicon glyphicon-cog"></i></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>
</div>    
  <span class="input-group-addon validation-icon glyphicon glyphicon-asterisk"></span>          </div>
      <!-- /.input-group -->

如何使用选择，按钮，按钮下拉列表和带引导程序的插件创建按钮组

2 个答案: