Question

我有一个表格，在按钮点击时会在屏幕外展开宽度，这样折叠后的移动菜单会在屏幕右侧消失，但它只会在我的手机上发生。即使是移动浏览器模拟器似乎也没有问题。我在计算机上模拟这个解决方案时遇到了麻烦，但这里是小提琴。我在iPhone 7上运行Safari。

https://jsfiddle.net/z8zLe19w/9/

HTML

  <body>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div><a class="navbar-brand" href="/">Brand</a></div>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">One</a></li>
        <li class="active"><a href="#">two</a></li>
      </ul>
    </div>
  </div>
</nav>
<section>
<div class="container">
<form class="form-inline">
  <div class="form-group">
    <button type="button" class="btn btn-primary" onclick="populateTable()">Populate Table</button>
    <button type="button" class="btn btn-primary" onclick="clearTable()">Clear Table</button>
  </div>
</form>
<div class="row">
  <table class='table table-striped' id="data-table">
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
      <th>Col4</th>
      <th>Col5</th>
      <th>Col6</th>
      <th>Col7</th>
      <th>Col8</th>
    </tr>
  </table>
</div>
</div><!-- End container -->
</section>

CSS

section {
  padding-top: 60px;
}

的Javascript

function populateTable() {
  var data_table = document.getElementById('data-table');
  var new_row = data_table.insertRow(-1);  
  for(var i=0;i<8;i++) {
    var new_cell = new_row.insertCell(-1);
    new_cell.innerHTML = "Daaaaaattttaaaaaaaaa";
  }
}

function clearTable() {
  var data_table = document.getElementById('data-table');
  while(data_table.rows.length > 1) {
    data_table.deleteRow(-1);
  }
}

Answer 1

添加固定在该部分的位置。

section {
  padding-top: 60px;
  position: fixed;
}

Answer 2

我的问题是Responsive table handling in Twitter Bootstrap的副本我添加了课程

table-responsive

到我的<div class="row">围绕我的桌子，<div class="row table-responsive">，现在工作正常。

Bootstrap 3 Navbar在iPhone上移动屏幕

2 个答案: