引导表单组答案

【问题标题】：Bootstrap form group引导表单组
【发布时间】：2015-09-18 17:03:40
【问题描述】：

我想创建一个引导表单输入组，如下图所示

我要创建的是一个输入组：

[文本字段 |下拉 |文本框 |按钮 |文本框 |按钮]

任何 ide 如何做到这一点？我无法让它工作。我在同一个组中获得了第一个文本字段和下拉菜单，但其余组件位于我已将输入组放入的行/列之外。

【问题讨论】：

是的，我回家后可以发布一个 jsfiddle。

标签： html forms twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

.input-group-addon 和 .input-group-btn 类成功了。一点border-radius 控制，用一点jQuery 来更新下拉和Bingo 的值！这是您的代码：

HTML：

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Weight">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          KG
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">KG</a></li>
          <li><a href="#">POUND</a></li>
        </ul>
      </div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default">
          Flow
        </button>
      </div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default">
          Unit / KG
        </button>
      </div>
    </div>
  </div>
</form>

CSS：

.btn-default {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.input-group-btn:last-child>.btn {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

JS：

$(".dropdown-menu li a").click(function(){
  $(this).parents(".input-group-btn").find('.btn').html($(this).text()+' <span class="caret"></span>');
});

这是一个有效的 BOOTPLY 供您参考。干杯！

【讨论】：

【解决方案2】：

;诀窍是在字段上设置宽度。做了一些丑陋的内联样式，你必须把它放在样式表中。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
      <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body>
    <form class="form-inline">
      <div class="form-group">
        <div class="input-group">
          <input type="text" class="form-control" id="exampleInputAmount"  style="width:50px">
          <select class="form-control" style="width:90px;-webkit-appearance: none;">
            <option>kg</option>
            <option>gram</option>
          </select>
          <input type="text" class="form-control" id="exampleInputAmount"  style="width:50px">
          <div class="input-group-addon btn">Flow</div>
          <input type="text" class="form-control" id="exampleInputAmount"  style="width:50px">
          <div class="input-group-addon btn">Unit</div>
        </div>
      </div>
    </form>
  </body>
</html>

在此处查看示例和结果：http://jsbin.com/poyaqu/edit?html,output

【讨论】：