是否可以調整Bootstrap中的控件標籤寬度？

這段代碼的輸出（我試圖在jsFiddle上發佈，但現在看起來並沒有工作）看起來很合理，但是標籤左側有很多空間「浪費」。田地本身和它們一樣寬，這一點很重要。是否可以調整Bootstrap中的控件標籤寬度？

enter image description here

這是在那裏有更多的領域和空間有限的實際情況的問題。我希望能夠獨立於總控制組寬度來控制標籤寬度，我希望它能夠保持與該字段的右對齊，並且（最重要的是）我想要一個較短的標籤以使字段也向左移動（這不會發生，如果你只是打亂控制標籤的寬度）。

我並不熱衷於鑽研LESS，那是我唯一的選擇嗎？任何意見讚賞。

<div class="container-narrow" style="width:700px"> 
     <div class="content"> 
      <div class="row-fluid"> 
       <div class="span5"> 
        <form class="form-horizontal" id="applies-Step1-form" action="/" method="post"> 
         <div class="control-group"> 
          <label class="control-label required" for="Step1_email">Email:</label> 
          <div class="controls"> 
           <input class="span12" size="50" maxlength="255" name="Step1[email]" id="Step1_email" type="text" /> 
          </div> 
         </div> 
        </form> 
       </div> 
       <div class="span7"> 
        <form class="form-horizontal" id="applies-Step1-form" action="/" method="post"> 
         <div class="control-group"> 
          <label class="control-label required" for="Step1_email">Thing1</label> 
          <div class="controls"> 
           <input class="span12" size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" /> 
          </div> 
         </div> 
        </form> 
       </div> 
      </div> 
     </div> 
    </div> 

</body>

來源

2013-02-22 GregT

一個選項是一個使用.FORM內聯的形式，以允許在同一行上的形式的元素。

事情是這樣的：

<form class="form-inline"> 
    <label>Email: 
     <input type="text" class="span1" name="email" /> 
    </label> 
    <label>Thing1 
     <input type="text" class="span3" name="thing1" /> 
    </label> 
</form>

如果你想第二個標籤之前多個間隔，你需要自定義CSS。

來源

2013-02-22 19:37:16 mcreenan

感謝您的答覆。我還發現，您可以直接管理標籤，但這會產生其他問題。無論如何，祝你週末愉快！ – GregT 2013-02-22 20:18:27

是的，當你想要一個緊湊，簡潔的形式:(）時，bootstrap是非常有限的。 – mcreenan 2013-02-22 20:29:47

-1

<標籤類= "控制標籤需要" 風格= "寬度：100像素;填充左：60像素; "爲= " Step1_email " >電子郵件：< /標籤>

保持（寬度+填充左）== 160個

來源

2013-06-21 21:46:40 user2510490

是否可以調整Bootstrap中的控件標籤寬度？

回答

相關問題