草庐IT

html - Bootstrap 3 表格响应不起作用。 X 滚动条出现在整个网站而不是表格上

coder 2023-08-03 原文

当我的屏幕宽度减小到小于我的表格能够显示的最小宽度时，而不是在 table-responsive 上获得水平滚动条包装器，它增加了我整个网站的宽度。我已经尝试了我遇到的每一个 SO 解决方案，但没有成功。

我怀疑这与我的 flexbox 样式有关。基本上，我已经设计了我的网站样式，以便我的主页内容部分(位于 <div id="aspnet-placeholder-content" class="container"></div> 内)将在考虑页脚和粘性页眉后占据视口(viewport)的剩余高度。到目前为止，除了这个问题，我没有遇到任何问题。

如何阻止表格扩展我网站的宽度？

编辑:Here's a JSFiddle如果您不喜欢 SO 的内置代码段功能。

$(document).ready(function() {
  $("a").on("click", function(e) {
    e.preventDefault();
  })
  $("form").on("submit", function(e) {
    e.preventDefault();
  })
});
body {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

form.page-wrapper {
  padding: 51px 0 0;
  position: static;
  height: 100%;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

section#body-content {
  -ms-flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
  flex: 1 0 auto;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

section#body-content #subheader {
  background: #7e5bbd;
  padding-top: 35px;
  padding-bottom: 35px;
}

#aspnet-placeholder-content {
  flex: 1 0 auto;
}

footer {
  background: url("https://s25.postimg.org/4ylsw3w0v/brushed-metal-horizontal-darker-450.jpg") center top;
  padding-top: 30px;
  padding-bottom: 30px;
  margin-top: 20px;
}

@media (min-width: 768px) {
  footer .footer-content div:first-child {
    text-align: right;
    border-right: 1px solid #868686;
  }
  footer .footer-content div:nth-child(2) {
    text-align: left;
    border-left: 1px solid #868686;
  }
}

footer h5 {
  color: #868686;
}

@media (max-width: 767px) {
  .padding-left-none-sm,
  .padding-right-none-sm {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 768px) {
  .padding-left-none-sm {
    padding-left: 0;
  }
  .padding-right-none-sm {
    padding-right: 0;
  }
  .text-right-sm {
    text-align: right;
  }
  .text-left-sm {
    text-align: left;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <form class="page-wrapper">
    <header class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand">Logo</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li id="liHome"><a href="/">Home</a></li>
            <li class="dropdown" id="liService">
              <a href="/" data-toggle="dropdown" class="dropdown-toggle">Service <i style="font-size:x-small; opacity:0.4;" class="fa fa-chevron-down" aria-hidden="true"></i>
              </a>
              <ul class="dropdown-menu dropdown-menu-left">
                <li><a href="/">Create Ticket</a></li>
                <li><a href="/">View Tickets</a></li>
              </ul>
            </li>
            <li id="liProposals">
              <a href="/">Proposals</a>
            </li>
            <li id="liProjects">
              <a href="/">Projects</a>
            </li>
            <li id="liDocuments">
              <a href="/">Documents</a>
            </li>
          </ul>
        </div>
      </div>
    </header>
    <section id="body-content">
      <div id="subheader">
        <div class="container">
          <div class="col-sm-2 col-sm-push-10 padding-right-none-sm" style="text-align: right;">
            <button type="submit" class="btn btn-secondary" id="btnLogout"><strong>Sign out</strong></button>
          </div>
          <div class="col-sm-5 col-sm-pull-2 padding-left-none-sm">
            <div class="button-group">
              <select id="ddlLocations" class="form-control">
                  <option selected="selected" value="0">(select option)</option>
                  <option value="7889">Option 1</option>
                  <option value="8736">Option 2</option>
                  <option value="10398">Option 3</option>
                </select>
            </div>
          </div>
        </div>
      </div>
      <div id="aspnet-placeholder-content" class="container">
        <!--This is where page-specific server-generated content from ASP.NET will render-->
        <h3>Page Title</h3>
        <br>
        <div style="overflow-x: auto">
          <table id="tblLocs" class="table table-striped">
            <tbody>
              <tr>
                <th>System</th>
                <th>Location Type</th>
                <th>Location</th>
                <th style="text-align: center;">Wired</th>
                <th style="text-align: center;">Equipped</th>
                <th style="text-align: center;">Programmed</th>
                <th style="text-align: center;">Tested</th>
              </tr>
              <tr>
                <td>Access Control</td>
                <td>Computer Station</td>
                <td>2nd Floor IT Room</td>
                <td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td>
                <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
                <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
                <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>Security Office</td>
                <td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td>
                <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
                <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
                <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>Badging Station</td>
                <td>Security Desk</td>
                <td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td>
                <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
                <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
                <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>Panel Location</td>
                <td>1st Floor Comm and Data Room</td>
                <td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td>
                <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
                <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
                <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>IT Closet</td>
                <td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td>
                <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
                <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
                <td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>
    <footer>
      <div class="container">
        <div class="row text-center footer-content">
          <div class="col-sm-6">
            <h5>Footer text</h5>
          </div>
          <div class="col-sm-6">
            <h5>Copyright stuff</h5>
          </div>
        </div>
      </div>
    </footer>
  </form>
</body>

最佳答案

感谢所有提供解决方案的人。所有这些似乎都涉及将包装器的宽度设置为 100%，如下所示:

#aspnet-placeholder-content {
  flex: 1 0 auto;
  width: 100%;
}

问题是，这使 .container Bootstrap 样式无效，该样式根据视口(viewport)大小设置以像素为单位的硬编码宽度。我不想要整页宽度的内容，所以我添加了一个类似于 .container 的新类，但使用 max-width 而不是 width:

.container-max {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .container-max {
    max-width: 750px;
  }
}
@media (min-width: 992px) {
  .container-max {
    max-width: 970px;
  }
}
@media (min-width: 1200px) {
  .container-max {
    max-width: 1170px;
  }
}

现在我的包装器使用这个新类而不是 .container，并且在包装器上设置 width: 100% 将达到预期的效果。

<div id="aspnet-placeholder-content" class="container-max">

Demo of final result

关于html - Bootstrap 3 表格响应不起作用。 X 滚动条出现在整个网站而不是表格上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44182232/

Bootstraphtml34ltgtcsstwitter-bootstrapresponsive-design

有关html - Bootstrap 3 表格响应不起作用。 X 滚动条出现在整个网站而不是表格上的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它

  3. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  4. ruby-on-rails - 使用 rails 4 设计而不更新用户 - 2

    我将应用程序升级到Rails4，一切正常。我可以登录并转到我的编辑页面。也更新了观点。使用标准View时，用户会更新。但是当我添加例如字段:name时，它​​不会在表单中更新。使用devise3.1.1和gem'protected_attributes'我需要在设备或数据库上运行某种更新命令吗？我也搜索过这个地方，找到了许多不同的解决方案，但没有一个会更新我的用户字段。我没有添加任何自定义字段。 最佳答案 如果您想允许额外的参数，您可以在ApplicationController中使用beforefilter，因为Rails4将参数

  5. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  6. ruby-on-rails - 每次我尝试部署时，我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

    我是Google云的新手，我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目，而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

  7. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  8. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  9. ruby-on-rails - Prawn - 表格单元格内的链接 - 2

    我正在尝试用Prawn生成PDF。在我的PDF模板中，我有带单元格的表格。在其中一个单元格中，我有一个电子邮件地址:cell_email=pdf.make_cell(:content=>booking.user_email,:border_width=>0)我想让电子邮件链接到“mailto”链接。我知道我可以这样链接:pdf.formatted_text([{:text=>booking.user_email,:link=>"mailto:#{booking.user_email}"}])但是将这两行组合起来(将格式化文本作为内容)不起作用:cell_email=pdf.make_c

  10. 【Java 面试合集】HashMap中为什么引入红黑树，而不是AVL树呢 - 2

    HashMap中为什么引入红黑树，而不是AVL树呢1.概述开始学习这个知识点之前我们需要知道，在JDK1.8以及之前，针对HashMap有什么不同。JDK1.7的时候，HashMap的底层实现是数组+链表JDK1.8的时候，HashMap的底层实现是数组+链表+红黑树我们要思考一个问题，为什么要从链表转为红黑树呢。首先先让我们了解下链表有什么不好？？？2.链表上述的截图其实就是链表的结构，我们来看下链表的增删改查的时间复杂度增：因为链表不是线性结构，所以每次添加的时候，只需要移动一个节点，所以可以理解为复杂度是N(1)删：算法时间复杂度跟增保持一致查：既然是非线性结构，所以查询某一个节点的时候

随机推荐