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

Question

我使用引导模态创建了一个弹出窗口。 这是它的样子

我想使input和input-group元素具有相同的宽度，并从这个问题中提到的相同位置开始。 我已经尝试使用它的答案中提到的form-group ，但是它不起作用。 我是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

您没有完全使用col-*-*类，您的输入也缺少类。 看看这个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-*的大小以正确适合模式。

Answer 2

演示： https : //jsbin.com/xewevu/1/

表格放置在错误的位置，没有在输入上使用正确的类，因此您需要编写自定义CSS或使用更多的包装器和网格系统，这确实是IMO的过大杀伤力。

这种方法的.help在于，如果您决定使用.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;
}