引导表单组

Question

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

引导输入组

我要创建的是具有以下内容的输入组：

[文本字段| 下拉菜单 文字栏| 按钮| 文字栏| 按钮]

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

Answer 1

;诀窍是在字段上设置宽度。 做了一些难看的内联样式，您必须将其放在样式表中。

<!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，输出

Answer 2

类.input-group-addon和.input-group-btn 。 用一些jQuery进行一些border-radius控制，以更新dropdown和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 个解决方案

解决方案1
0 2015-07-01 14:01:00

解决方案2
0 2015-07-01 14:34:22

引导表单组

问题描述

2 个解决方案

解决方案1 0 2015-07-01 14:01:00

解决方案2 0 2015-07-01 14:34:22

解决方案1
0 2015-07-01 14:01:00

解决方案2
0 2015-07-01 14:34:22