Twitter Bootstrap 3 - 嵌套表單水平響應式設計問題

我有許多Twitter Bootstrap 3表單水平樣式表單，它們嵌套在各種頁面上的列中。一般來說，當標籤和輸入有足夠空間並排顯示時，他們會這樣做，否則標籤會出現在輸入上方。一切都很好，並且如預期和期望的那樣。Twitter Bootstrap 3 - 嵌套表單水平響應式設計問題

但是，當表單的起始位置沒有太多可用的寬度時，比如說表單位於使用Bootstrap 12列網格系統的12列寬的3列外部，我看到標籤被切斷並在輸入下方消失，而不是看到標籤在輸入上方移動。爲了澄清，如果標籤在上面，那麼在窗體中將會有足夠的寬度來顯示所有內容。

可以看到的此這裏存在的一個簡化的例子，它使用Twitter的引導3文檔中找到的形式水平例如： http://jsfiddle.net/BF4ZK/

在上面的例子中所示，「電子郵件」和「密碼」標籤被截斷而不是在輸入之上移動。造成這種情況的代碼如下：

<!DOCTYPE html><html lang="en"> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" type="text/css"  href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" /> 
    <script    type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script> 
    <script    type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 
</head> 
<body> 
    <div class="container"> 
     <div class="row"> 

      <!-- always have two side-by-side columns --> 
      <div class="col-xs-3"> 

       <!-- place a form in the left column - exact copy from Bootstrap official example of form-horizontal --> 
       <form class="form-horizontal" role="form"> 
        <div class="form-group"> 
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label> 
        <div class="col-sm-10"> 
         <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> 
        </div> 
        </div> 
        <div class="form-group"> 
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label> 
        <div class="col-sm-10"> 
         <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> 
        </div> 
        </div> 
        <div class="form-group"> 
        <div class="col-sm-offset-2 col-sm-10"> 
         <div class="checkbox"> 
         <label> 
          <input type="checkbox"> Remember me 
         </label> 
         </div> 
        </div> 
        </div> 
        <div class="form-group"> 
        <div class="col-sm-offset-2 col-sm-10"> 
         <button type="submit" class="btn btn-default">Sign in</button> 
        </div> 
        </div> 
       </form>   

      </div> 

      <div class="col-xs-9"> 
       3 col to left, 9 col to right. 
      </div> 

     </div> 
    </div> 
</body>

如果在本實施例中的形式被轉移到要在頁面，而不是較小的3個柱部的左側右側9柱部如果沒有足夠的空間，那麼它將按照預期作出響應，並且通常並排顯示或向上移動。我已經嘗試了很多變體，包括多個col-xs，col-sm，col-md，col-lg，甚至在沒有窗體橫向和標籤控件的情況下滾動我自己的解決方案，在表單中添加行，更改Bootstraps最大寬度，等等。事情似乎是相當一致的，因爲如果形式存在於頁面的更廣泛的部分，則該形式按照預期作出響應。

有沒有人遇到過這個或知道解決方案？這似乎是一個Twitter的Bootstrap 3錯誤，但我可能做了一些不正確的事情，所以會歡迎任何更正。我有一個解決方法，強制form-horizontals始終是垂直的，但我真的想要按照它在Twitter Bootstrap中的意圖進行表單水平工作。

非常感謝任何反饋。

來源

2014-01-08 Neil Cresswell

任何時候當你窩另一列內的列，你必須有一個包裹着一個新行：

<div class="col-xs-3"> 
<!-- place a form in the left column - exact copy from Bootstrap official example of form-horizontal --> 
<form class="form-horizontal" role="form"> 
<div class="form-group"> 
<label for="inputEmail3" class="col-sm-2 control-label">Email</label> 
<div class="row"> 
<div class="col-sm-10"> 
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">

有一次，我補充說，標籤和表單字段堆疊。

來源

2014-01-08 22:13:16 moodyjive

我感謝您抽出時間發表反饋意見。謝謝。我曾嘗試在我的原始文章之前在兩個主要列的每一列中添加一個額外的行包裝器，但不幸的是，根本沒有任何幫助（並且根據Bootstrap文檔，如果您的表單爲橫向，則不需要「行」「）。我從你的例子中注意到，你實際上在左列和右列之間添加了額外的行。這實際上將輸入列移動到標籤下方的新行，因此標籤始終位於頂部並且不響應。如果您測試沒有外欄的表單，您可以看到這一點。 –

啊，對不起。祝你好運！ – moodyjive

我非常感謝您花時間修補和發佈回覆。謝謝你的好運。 :) –

Twitter Bootstrap 3 - 嵌套表單水平響應式設計問題

回答

相關問題