Question

我尝试将 Label 2 与 bootstrap-select 一起使用，但它看起来与 bootstrap 不同（ Label 1 ）一个。如何让下面代码中的两个标签看起来一样？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">

    <title>Test</title>

    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css">
    <link href="http://getbootstrap.com/examples/non-responsive/non-responsive.css" rel="stylesheet">

  </head>

  <body>

    <div class="container">
      <div class="col-lg-6">
        <div class="input-group">
          <span class="input-group-addon">Labe 1</span>
          <input type="text" class="form-control" name="snpid" placeholder="Test">
          <span class="input-group-btn">
            <button class="btn btn-default" type="submit">GO!</button>
          </span>
        </div><!-- /input-group -->
      </div><!-- /.col-lg-6 -->  
    <div>    
    <BR/>
    <HR>

  <div class="container">
    <form class="form-inline">
      <div class="form-group">
        <span class="input-group-addon">Label 2</span>
      </div>
      <div class="form-group">
        <select id="lunch" class="selectpicker" data-live-search="true" title="Please select a lunch ...">
          <option>Hot Dog, Fries and a Soda</option>
          <option>Burger, Shake and a Smile</option>
          <option>Sugar, Spice and all things nice</option>
          <option>Baby Back Ribs</option>
          <option>A really really long option made to illustrate an issue with the live search in an inline form</option>
        </select>
      </div>
    </form>
    <div>  

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>
    <script>
      $('.selectpicker').selectpicker();
    </script>
  </body>
</html>

Answer 1

来自Bootstrap docs：

通过在任何基于文本的<input>之前，之后或两侧添加文本或按钮来扩展表单控件。将.input-group与.input-group-addon或.input-group-btn一起使用，可以将元素添加到单个.form-control或附加元素。

您需要将select和.input-group-addon包裹在.input-group中：

<div class="input-group">
  <span class="input-group-addon">Label 2</span>
  <select id="lunch" class="selectpicker form-control" data-live-search="true" title="Please select a lunch ...">
    <option>Hot Dog, Fries and a Soda</option>
    <option>Burger, Shake and a Smile</option>
    <option>Sugar, Spice and all things nice</option>
    <option>Baby Back Ribs</option>
    <option>A really really long option made to illustrate an issue with the live search in an inline form</option>
  </select>
</div>

检查出来：

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">Labe 1</span>
      <input type="text" class="form-control" name="snpid" placeholder="Test">
      <span class="input-group-btn">
      <button class="btn btn-default" type="submit">GO!</button>
      </span>
    </div>
  </div>
  <br>
  <hr>
  <div class="container">
    <form class="form-inline">
      <div class="input-group">
        <span class="input-group-addon">Label 2</span>
        <select id="lunch" class="selectpicker form-control" data-live-search="true" title="Please select a lunch ...">
          <option>Hot Dog, Fries and a Soda</option>
          <option>Burger, Shake and a Smile</option>
          <option>Sugar, Spice and all things nice</option>
          <option>Baby Back Ribs</option>
          <option>A really really long option made to illustrate an issue with the live search in an inline form</option>
        </select>
      </div>
    </form>
  </div>
</div>

Answer 2

我已经使用额外的CSS修改了caeth的解决方案，以确保选择按钮在各自的角落处呈圆角。

<强> HTML

<form class="form-inline">
    <div class="input-group">
        <span class="input-group-addon">Label</span>
        <select id="lunch" class="selectpicker form-control" data-live-search="true" title="Please select a lunch ...">
            <option>Hot Dog, Fries, and a Soda</option>
            <option>Burger, Shake, and a Smile</option>
            <option>Sugar, Spice, and all things nice</option>
            <option>Baby Back Ribs</option>
            <option>A really really long option made to illustrate an issue with the live search in an inline form</option>
        </select>
    </div>
</form>

<强> CSS

.input-group > .input-group-btn:last-child > .selectpicker {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.input-group > .input-group-btn:first-child > .selectpicker {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

请在此处查看：http://jsfiddle.net/xr4uofje/130/

Answer 3

我刚刚发现了一种简单的方法，可以在select（无引导选择）中包含附加组件。这个答案可能与bootstrap-select问题没有严格的关系，但对于登陆这里寻找这个答案的人来说可能会有所帮助（正如我所做的那样）。我只是在附加组件下移动选择，边距为：-4px，并且像这样在宽度上添加4个像素

.input-group select.form-control {
    margin-left: -4px;
    width: calc(100% + 4px);
}

然后我为附加组件设置了相对位置和z-index，如下所示：

.input-group .input-group-addon {
    z-index: 5;
    position: relative;
}

我希望这会有所帮助

input-group-addon with bootstrap-select

3 个答案: