个人中心
gpt4 book ai didi

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

转载 作者：太空狗 更新时间：2023-10-29 13:12:13 28 4
gpt4 key购买 nike

当我的屏幕宽度减小到小于我的表格能够显示的最小宽度时，而不是在 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/

28 4 0
文章推荐： git - 如何在 Windows Git Gui 中执行 'git log'？
文章推荐： git - git 中有多少种分支？
文章推荐： android - java.lang.reflect.ArtMethod 对象在 Android 的内存中泄漏
文章推荐： html - 规范中不允许在自定义元素中使用自关闭标签的原因是什么？
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com