帶行或內聯表單的Bootstrap3水平表單

Question

我想完成每行有多個左對齊表單控件行的水平表單。最終的佈局應該像這樣

首先我想要的圖標顯示旁邊的用戶名的右側的使用者的名字，就像在上圖中顯示。

我將GWT和bootstrap3.3.2一起使用。我讀了很多關於水平表單 與內聯表單的組合或者使用水平表單以及表單控件的行。我最喜歡的最後一種方法。

我準備了一個bootply，它顯示了我的第一個問題（我將爲其他問題創建第二個bootply和stackoverflow帖子）。 http://www.bootply.com/hheckner/GiPzaqWHlT

正如您在圖中所看到的那樣，圖標與用戶的名稱不完全一致（垂直）。此外，我想顯示用戶名下的圖標NEXT，所以如果用戶名更長，圖像應該向右移動，反之亦然。使用網格在這裏沒有幫助（我想至少）。該圖標應該立即顯示在用戶名旁邊？

我該如何做到這一點？

Answer 1

要顯示一些文字旁邊的圖標，您只需在文本之後跨度，但仍然在<p>元素內。

我使用僅Bootstrap Grid做了一些與您在屏幕截圖中提供的形式相似的形式。可能有多種解決方案，這可能在代碼行方面更好，但是當你習慣了網格系統時，這應該是相當快的方法。

我必須警告您，我對所有文本都使用<h4></h4>，對於某些文本沒有特殊元素，所以您應該相應地修復它。此外，Bootstrap的form-inline類僅在視口大於768px時才起作用 - 您可能不會在JSFiddle上看到工作示例，但是當您在屏幕上看到大於768px的圖片時，它應該會很好。

<div style="text-align:left;"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-4"> 
       <h4>Owner</h4> 
      </div> 
      <div class="col-md-8"> 
       <h4>Hannes Heckner <span class="glyphicon glyphicon-pencil"></span></h4> 
      </div> 
     </div> 
     <form class="form-inline"> 
      <div class="row"> 
       <div class="col-md-4"> 
        <h4>Scheduled for</h4> 
       </div> 
       <div class="col-md-8"> 
        <div class="row"> 
         <div class="col-md-1"> 
          <h4>Begin:</h4> 
         </div> 
         <div class="col-md-11"> 
          <div class="form-group"> 
           <input type="text" class="form-control" id="beginDate" placeholder="11/10/2015"> 
          </div> 
          <div class="form-group"> 
           <input type="text" class="form-control" id="beginTime" placeholder="10:30"> 
          </div> 
          (Duration: <div class="form-group"> 
           <input type="text" class="form-control" id="beginTime" placeholder="30"> 
          </div> min) 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-md-1"> 
          <h4>End:</h4> 
         </div> 
         <div class="col-md-11"> 
          <div class="form-group"> 
           <input type="text" class="form-control" id="endDate" placeholder="11/10/2015"> 
          </div> 
          <div class="form-group"> 
           <input type="text" class="form-control" id="endTime" placeholder="11:30"> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-4"> 
        <h4>Location</h4> 
       </div> 
       <div class="col-md-8"> 
        <div class="form-group"> 
         <input type="text" class="form-control" id="location"> 
        </div> 
       </div> 
      </div> 
     </form> 
    </div> 
</div> 

的jsfiddle https://jsfiddle.net/dejanmarolt/5ctd4fe5/