Question

我正在尝试内联我的div中的元素而不将它们分解为自己的col

HTML：

<div class="row">
 <div class="col-sm-12">
   <label for="null" class="control-label">Item Add-ons</label>
 </div>

 <div class="items_part">

    <div class="col-xs-12">
       <div class="input-group added_items">
           <input type="text" name="item_name[]" value="Ticket" class="form-control" readonly="">
           <input type="text" name="item_desc[]" value="Free Ticket" class="form-control">
            <span class="glyphicon glyphicon-remove input-group-addon" aria-hidden="true"></span>
       </div>
     </div>
  </div>
</div>

这最终导致输入占据100％的宽度，因此最终会相互叠加。

为了更清楚，我希望将其作为：

input1 input2 delete_button

此代码导致：

input1
input2
delete_button

也是内联形式的bootstrap的链接：here

Answer 1

div class="row">
 <div class="col-sm-12">
   <label for="null" class="control-label">Item Add-ons</label>
 </div>

 <div class="items_part">

    <div class="col-xs-12">
       <div class="input-group added_items">

          <li> <input type="text" name="item_desc[]" value="Free Ticket" class="form-control"></li>
          <li>  <span class="glyphicon glyphicon-remove input-group-addon" aria-hidden="true"></span></li>
       </div>
     </div>
  </div>
</div>

css：added_items {width：100％;} added_items ul li {display：inline-block;宽度：30％;}

如何内联输入组内的元素（强制它们在一行上）

1 个答案: