Question

我的页面有固定的页脚和标题http://magician-bombs-84382.bitballoon.com/

在页脚上，我有4个按钮，但当宽度调整到小于大屏幕时，按钮垂直对齐。我正在制作一个页面，以适应此媒体查询范围内的移动设备

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}

我制作的应用将被锁定为纵向视图，因此我不想在大屏幕上访问该页面。

在查看bootstrap.css文件后，我似乎无法确定负责垂直排列按钮的代码，而不是水平遵循类行内可用的col-md-3顺序。

如何水平排列按钮？删除页脚position: absolute似乎无法解决问题。

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

Answer 1

使用.col-xs-3，它不会在超小屏幕上中断。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<footer class="footer">
  <div class="container">
    <div class="row">
      <div class="col-xs-3">
        <button class="btn btn-primary">One</button>
      </div>
      <div class="col-xs-3">
        <button class="btn btn-primary">One</button>
      </div>
      <div class="col-xs-3">
        <button class="btn btn-primary">One</button>
      </div>
      <div class="col-xs-3">
        <button class="btn btn-primary">One</button>
      </div>
    </div>
  </div>
</footer>

Answer 2

它工作正常，按钮也不会隐藏。

<强> Fiddle demo

.footer {
  bottom: 0;
  width: 100%;
  background-color: #f5f5f5;
}

Twitter Bootstrap在移动设备上固定页脚

2 个答案: