将输入组的宽度与引导程序中的输入相匹配

Question

我使用引导模式创建了一个弹出窗口。这里是如何看起来像

我想使input和input-group元素是相同的宽度和像this问题中提到的相同的位置开始。我曾尝试使用form-group，如其在answer中所述，但它不起作用。我是bootstrap和JavaScript的新手。

HTML代码

<form class="form-horizontal"> 
    <div class="modal fade" id="apstMoleculeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal"> 
         <span aria-hidden="true">&times;</span> 
         <span class="sr-only">Close</span> 
        </button> 
        <h4 class="modal-title" id="myModalLabel">Enter Information</h4> 
       </div> 

       <div class="modal-body">       
        <div class="form-group"> 
         <label class="control-label col-xs-3">Name</label> 
         <div class="controls col-xs-9"> 
          <input type="text" placeholder="Enter Name"> 
          &nbsp;<span class="glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span> 
         </div> 
        </div> 

        <div class="form-group"> 
         <label class="control-label col-xs-3">Place</label> 
         <div class="controls col-xs-9"> 
          <input type="text" placeholder="Enter Place"> 
          &nbsp;<span class="glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span> 
         </div> 
        </div> 

        <div class="form-group"> 
         <label class="control-label col-xs-3">Cost</label> 
         <div class="controls col-xs-9 input-group"> 
          <span class="input-group-addon">$</span> 
          <input type="text" placeholder="0.00"> 
          &nbsp;<span class="glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info" ></span> 
         </div> 
        </div>      
       </div> <!-- modal-body --> 

       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="button" class="btn btn-primary">Save changes</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</form> 

Answer 1

DEMO：https://jsbin.com/xewevu/1/

在错误的位置的形式，不使用输入正确的类，你需要编写自定义的CSS或使用更多的包装和电网系统，这是真的IMO过度杀伤。

这种方法的美妙之处在于，如果您决定使用.col-sm而不是xs，那么.help将不堆叠。

HTML：

<div class="modal fade" id="apstMoleculeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal"> 
      <span aria-hidden="true">&times;</span> 
      <span class="sr-only">Close</span> 
      </button> 
      <h4 class="modal-title" id="myModalLabel">Enter Information</h4> 
     </div> 
     <form class="form-horizontal"> 
      <div class="modal-body"> 
       <div class="form-group"> 
        <label class="control-label col-xs-3">Name</label> 
        <div class="controls col-xs-9"> 
        <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span> 
        <input type="text" class="form-control" placeholder="Enter Name"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="control-label col-xs-3">Place</label> 
        <div class="controls col-xs-9"> 
        <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span> 
        <input type="text" class="form-control" placeholder="Enter Place"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="control-label col-xs-3">Cost</label> 
        <div class="controls col-xs-9"> 
        <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span> 
        <div class="input-group"> 
         <span class="input-group-addon">$</span> 
         <input type="text" class="form-control" placeholder="0.00"> 
         </span> 
        </div> 
        </div> 
       </div> 
      </div> 
      <!-- modal-body --> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary">Save changes</button> 
      </div> 
     </form> 
     </div> 
    </div> 
</div> 

CSS

#apstMoleculeModal .form-group { 
padding-right:20px; 
    position:relative; 
} 

#apstMoleculeModal .help { 
position:absolute; 
right:-8px; 
top:12px; 
} 

Answer 2

你不太使用类col-*-*的权利，你的投入也缺少类。看看这个Bootply：

Bootply

这里明白我的意思。

下面的代码（删除所有情态动词，所以我可以直接编辑）

<form class="form-horizontal"> 
    <div class="form-group"> 
    <label class="control-label col-xs-3">Name</label> 
    <div class="col-xs-2"> 
     <input class="form-control input-sm" placeholder="Enter Name" type="text"> 
    </div> 
    <div class="col-xs-1"> 
     <span class="glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span> 
    </div> 
    </div> 

    <div class="form-group"> 
    <label class="control-label col-xs-3">Place</label> 
    <div class="col-xs-2"> 
     <input class="form-control input-sm" placeholder="Enter Place" type="text"> 
    </div> 
    <div class="col-xs-1"> 
     <span class="glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span> 
    </div> 
    </div> 

    <div class="form-group"> 
    <label class="control-label col-xs-3">Cost</label> 
    <div class="col-xs-2"> 
     <div class="input-group"> 
     <span class="input-group-addon">$</span> 
     <input class="form-control input-sm" placeholder="0.00" type="text"> 
    </div> 
    </div> 
    <div class="col-xs-1"> 
     <span class="glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span> 
    </div> 
    </div>      
</form> 

请注意：

您可能需要改变col-xs-*的大小以适应模式正确。