崩潰直列形式的引導

Question

我已經添加了直列的形式到我的網頁，在主要區域，

形式有點寬，我想它在塌陷991px，

但該頁面的其餘部分可以摺疊在767px

我明白它可以用mediaquery完成，但不知道要編碼什麼。

我卡在這裏！ 我能做什麼？

我最初從文件的導航欄複製了內聯表單，該按鈕工作正常。

它看起來像這樣：

<div class="container"> 

<div class="text-center"> 
     <button   
     class="btn btn-default form-toggle" 
     type="button" 
     data-toggle="collapse" 
     data-target="#collapseExample" 
     aria-expanded="false" 
     aria-controls="collapseExample"> <span class="sr-only"> Toggle navigation</span> Reservations 
     </button> 
</div> 

<div id="collapseExample" class="navbar-collapse collapse"> 

    <div class="text-center "> 

    <form class="form-inline navbar-form" name="bookerform" action="---" method="GET" target="_self"> 
      <div class="form-group">hidden elements</div> 
      <div class="form-group">arrivo</div> 
      <div class="form-group">partenza</div> 
      <div class="form-group text-left"> Numero N</div> 
      <div class="form-group text-left"> Numero A</div> 
      <div class="form-group text-left"> Numero B</div> 
      <div class="form-group"> button check</div> 
     </form> 

    </div> 

    </div> 

</div> 

Answer 1

如果你只是希望它消失在992px但保持按鈕，把一個類上要崩潰的東西，並留下外面的按鈕。在992px沒有像這樣：然後寫一個媒體查詢顯示

<form class="form-inline navbar-form collapse-class" name="bookerform" action="---" method="GET" target="_self"> 
     <div class="form-group">hidden elements</div> 
     <div class="form-group">arrivo</div> 
     <div class="form-group">partenza</div> 
     <div class="form-group text-left"> Numero N</div> 
     <div class="form-group text-left"> Numero A</div> 
     <div class="form-group text-left"> Numero B</div> 
     <div class="form-group"> button check</div> 
    </form> 

@media (max-width: 992px) { 
    .collapse-class { 
     display: none; 
    } 
} 

有可能是一個更優雅的方式來做到這一點，但我有一個很難弄清楚你想要什麼，所以我試圖成爲一般人。

Answer 2

感謝您的幫助， 好吧，其實我幾乎在那裏。 我喜歡使用引導電網的解決方案，我已經添加了媒體的質疑，但它沒有顯示，因爲我想，從992以上應該只顯示的形式，而不是按鈕

<div class="container"> 
<div class="text-center"> 
    <button class="btn btn-default" type="button" data-toggle="collapse" data-target="#myForm"> Reservations 
    </button> 
</div> 
<br> 
<form class="collapse collapse-class" role="form" id="myForm"> 
    <div class="col-lg-2"> 
     <p> 
      <input type="email" class="form-control"> 
     </p> 
    </div> 
    <div class="col-lg-2"> 
     <p> 
      <input type="password" class="form-control"> 
     </p> 
    </div> 
    <div class="col-lg-2"> 
     <p> 
      <input type="text" class="form-control"> 
     </p> 
    </div> 
    <div class="col-lg-2"> 
     <p> 
      <input type="text" class="form-control"> 
     </p> 
    </div> 
    <div class="col-lg-2"> 
     <p> 
      <input type="text" class="form-control"> 
     </p> 
    </div> 
    <div class="col-lg-2"> 
     <button type="submit" class="btn btn-default">Button</button> 
    </div> 
</form> 
</div> 


@media (max-width: 992px) { 
.collapse-class { 
    display: none; 
} 
} 

Answer 3

你可以做你的自定義摺疊與簡單的媒體查詢和CSS類。只需將CSS顯示從行內塊切換到塊即可。這裏，在1000px和以下，第二個td的兩個選擇將垂直堆疊;水平地在1000px以上。

CSS：

.collapse-it { 
     display: inline-block; 
    } 

@media (max-width: 1000px) { 
    .collapse-it { 
     display:block; 
    } 

    .mobile-view:after { 
    content:"mobile view vertical stacking"; 
    } 
} 

HTML：

<table style="border: 1px solid black;"> 

<tbody><tr> 
    <td style="border: 1px solid black;"> 
    <div style="margin:5px;">credit card expiration</div> 
    </td> 

<td style="border: 1px solid black;"> 
<div style="margin:5px;"> 


    <div class="form-group collapse-it"> 
    <select> 
     <option>a</option> 
     <option>b</option> 
     <option>c</option> 
    </select> 
    </div> 
    <div class="form-group collapse-it"> 
    <select> 
     <option>d</option> 
     <option>e</option> 
     <option>f</option> 
    </select> 
    </div> 

</div>         
</td> 

    <td class="mobile-view" style="border: 1px solid black;"></td> 

</tr> 

</tbody></table> 

View Demo on Bootply