將輸入組的寬度與引導程序中的輸入相匹配

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-*的大小以適應模式正確。