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

Question

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

我想让input和input-group元素具有相同的宽度，并从this问题中提到的相同位置开始。我尝试使用answer中提到的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：

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

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;
}