Question

我想创建一个类似于下图所示的引导表单输入组

bootstrap input group

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

任何想法如何做到这一点？我不能让它工作。我得到了第一个文本字段和同一组中的下拉列表，但其余的组件放在我放入输入组的行/列之外。

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,output

Answer 2

类.input-group-addon和.input-group-btn完成了这项工作。一点border-radius控制带有一个小jQuery来更新下拉列表和宾果游戏的值！这是你的代码：

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 供您参考。干杯！

Bootstrap表单组

2 个答案: