崩溃直列形式的引导

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