表格输入在一行

时间:2015-11-23 08:17:07

标签: forms twitter-bootstrap twitter-bootstrap-3

我将3个输入分为一行(bootply

<div class="container">
    <div class="row">
        <div class="form-group has-warning">
          <label for="inputName" class="col-lg-2 col-sm-3 control-label">name</label>
          <div class="col-md-2 col-sm-2">                      
            <input type="text" class="form-control" placeholder="name" name="order">
          </div>


          <label for="inputWarning1" class="col-lg-1 col-sm-3 control-label">quantity</label>
          <div class="col-md-2 col-sm-2">
            <input type="number" class="form-control " placeholder="quantity" name="quantity" id="inputWarning1">
          </div>


          <label for="inputName" class="col-lg-1 col-sm-3 control-label">####</label>
          <div class="col-md-2 col-sm-2">                      
            <input type="number" class="form-control" placeholder="AA" name="packetNumber">
          </div>

      </div>

    </div>
</div>

我想只有数量的输入才有类has-warning的颜色。有没有办法通过将3个输入保持在一行中来做到这一点?

1 个答案:

答案 0 :(得分:1)

只需从包含has-warning类的div中删除form-group类,然后在 quantity 标签上方放置一个单独的div,如下所示:

<div class="container">
    <div class="row">
        <div class="form-group">
          <label for="inputName" class="col-lg-2 col-sm-3 control-label">name</label>
          <div class="col-md-2 col-sm-2">                      
            <input type="text" class="form-control" placeholder="name" name="order">
          </div>

          <div class="has-warning">
             <label for="inputWarning1" class="col-lg-1 col-sm-3 control-label">quantity</label>
             <div class="col-md-2 col-sm-2">
               <input type="number" class="form-control " placeholder="quantity" name="quantity" id="inputWarning1">
             </div>
          </div>


          <label for="inputName" class="col-lg-1 col-sm-3 control-label">####</label>
          <div class="col-md-2 col-sm-2">                      
            <input type="number" class="form-control" placeholder="AA" name="packetNumber">
          </div>

      </div>

    </div>
</div>