Bootstrap3：右對齊輸入框旁邊的標籤（在Django 1.5中）

我希望在其輸入框旁邊有一個右對齊的標籤（中間有空格）。但是，標籤仍然是左對齊的。根據Boostrap3文檔和這個question，應該使用表單水平類，但仍然是不正確的。Bootstrap3：右對齊輸入框旁邊的標籤（在Django 1.5中）

Django模板下面的代碼不會產生兩列時尚領域，但左對齊的標籤：

<form class="form-horizontal" role="form"> 
    <div class="form-group"> 

     <div class="col-md-3 col-md-offset-1 input-md"> 
      {{ form.code|bootstrap_horizontal }} 
     </div> 
     <div class="col-md-3 col-md-offset-2 input-md"> 
      {{ form.name|bootstrap_horizontal }} 
     </div> 
     <div class="col-md-3 col-md-offset-1 input-md"> 
      {{ form.company|bootstrap_horizontal }} 
     </div> 

    </div> 

    <div class="btn-group btn-group-lg"> 
     <button class="btn" type="submit">Crear Marca</button> 
    </div> 
</form>

我想我失去了一些東西。在此先感謝您的幫助。

編輯：在jsfiddle輸出HTML。
實際輸出的圖像也包含在link中。如您所見，代碼&公司是左對齊的。

來源

2013-09-23 Rmartin

你可以添加html結果，而不是你的模板？在一個小提琴或bootply也許 –

低音，編輯的問題和包括html生成，也是一個圖像。希望這可以幫助。謝謝。 – Rmartin

我認爲你的文本是右對齊的，但由於網格類的嵌套效果不可見。

試着這麼做：

<form class="form-horizontal container" role="form"> 
    <div class="form-group"> 
    <label for="inputEmail1" class="col-sm-2 control-label">Code</label> 
    <div class="col-sm-4"> 
     <input type="email" class="form-control" id="inputEmail1" placeholder="Email"> 
    </div> 

    <label for="inputPassword1" class="col-sm-2 control-label">Name</label> 
    <div class="col-sm-4"> 
     <input type="password" class="form-control" id="inputPassword1" placeholder="Password"> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label for="inputEmail1" class="col-sm-2 control-label">Company</label> 
    <div class="col-sm-4"> 
     <input type="email" class="form-control" id="inputEmail1" placeholder="Email"> 
    </div> 
    </div> 
    <div class="btn-group btn-group-lg"> 
     <button class="btn" type="submit">Crear Marca</button> 
    </div> 
</form>

當你窩網格類（同事-）孩子獲得其父的寬度的百分比。當您在col-lg-6中嵌入col-lg-6時，它將佔視口的25％50％。

如果您想要使用左側浮動（您的col--類添加此浮動）相互緊挨着輸入，則它們不能位於不同的輸入組中。 .from-group有一個clearfix，可以撤消左邊的浮動。所以試試這樣的：

<div class="col-sm-6"> 
    <div class="form-group"> 
    <label for="inputEmail1" class="col-sm-4 control-label">Company</label> 
    <div class="col-sm-8"> 
     <input type="email" class="form-control" id="inputEmail1" placeholder="Email"> 
    </div> 
    </div> 
</div>  
<div class="col-sm-6"> 
    <div class="form-group"> 
    <label for="inputEmail1" class="col-sm-4 control-label">Company 2</label> 
    <div class="col-sm-8"> 
     <input type="email" class="form-control" id="inputEmail1" placeholder="Email"> 
    </div> 
    </div> 
</div>

來源

2013-09-25 20:07:34

Bootstrap3：右對齊輸入框旁邊的標籤（在Django 1.5中）

回答

相關問題