javascript - Bootstrap 3 Navbar 在 iPhone 上移出屏幕-6ren

javascript - Bootstrap 3 Navbar 在 iPhone 上移出屏幕

转载作者：行者123 更新时间：2023-11-28 04:28:45

25

4

我有一个表格，在单击按钮时会在屏幕外扩展宽度，这样做之后折叠的移动菜单会从屏幕右侧消失，但它只发生在我的手机上。甚至移动浏览器模拟器似乎也没有问题。我在计算机上模拟此解决方案时遇到问题，但这是 fiddle 。我在 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);
  }
}

最佳答案

将固定位置添加到该部分。

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

关于javascript - Bootstrap 3 Navbar 在 iPhone 上移出屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41842361/

25

4

0

文章推荐： javascript - 将CSS添加到没有标签的文本

文章推荐： javascript - 为 24 格式 jq 制作输入类型时间

文章推荐： c++ - 如何在 THeaderSection 中嵌入 VCL TEdit 控件？

java - 移 Action 为 Web 服务器 HTML
我正在做一个项目，我的 android 在这个项目中作为一个网络服务器工作；输入带端口号的 IP 地址，打开 Web 界面，用户可以将文件上传到手机。我想在 Web 界面上显示一些图片，以便我们的界面

首页

博学

6Ren·AI

商城

javascript - Bootstrap 3 Navbar 在 iPhone 上移出屏幕