时间戳

首页 > 解决方案 > 在同一行引导程序中选择和文本输入

html - 在同一行引导程序中选择和文本输入

问题描述

视觉辅助

我的计划是将 select 和 input 作为输入组。总之，我希望第二个表单组看起来像第一个。这是我的代码。

  <div class="row">
    <div class="col-lg-5 col-xs-12">
      <div class="box box-success">
        <div class="box-header with-border">
          <div class="box-body">
            <form role="form" method="post">
              <div class="box">
                <div class="form-group">
                  <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-user"></i>
                       Vendedor
                     </span>
                    <input type="text" class="form-control" name="nuevoVendedor" id="nuevoVendedor" value="oparedez" readonly>
                  </div>
                </div>
                <div class="form-group">
                  <div class="input-group" style="float:left;">
                      <select class="form-control" name="">
                        <option value="Factura No.">Factura No.</option>
                        <option value="Factura No.">Nota No.</option>
                      </select>
                      <input type="text" class="form-control" name="nuevaFactura" id="nuevaFactura" value="1-928361" readonly>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

标签： htmltwitter-bootstrap

解决方案

为什么不简单地将<input>带入与 相同.input-group的<select>：

<div class="form-group">
  <div class="input-group">
    <select class="form-control" name="">
      <option value="Factura No.">Factura No.</option>
      <option value="Factura No.">Nota No.</option>
    </select>
    <input type="text" class="form-control" name="nuevaFactura" id="nuevaFactura" value="1-928361" readonly>
  </div>
</div>

虽然默认情况下不需要，但您可能还需要float以下元素left：

.input-group > select,
.input-group > input {
  float: left;
}
<div class="form-group">
  <div class="input-group">
    <select class="form-control" name="">
      <option value="Factura No.">Factura No.</option>
      <option value="Factura No.">Nota No.</option>
    </select>
    <input type="text" class="form-control" name="nuevaFactura" id="nuevaFactura" value="1-928361" readonly>
  </div>
</div>

推荐阅读