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

谢谢你的帮助，确实，我几乎就在那里。我喜欢使用引导网格的解决方案，我已经添加了媒体查询，但它没有显示我想要的，从上面的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 2

您可以使用简单的媒体查询和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

Answer 3

如果你只是希望它以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;
    }
}

可能有一种更优雅的方式来做到这一点，但我很难弄清楚你想要什么，所以我试图做到一般。

折叠内联表单引导程序

3 个答案: