文章/答案/技术大牛

发布

社区首页 >问答首页 >引导数据库4列未正确响应

问引导数据库4列未正确响应
EN

Stack Overflow用户

提问于 2018-07-12 05:36:58

回答 1查看 139关注 0票数 0

我最近开始使用Bootstrap 4而不是3。第一个问题开始出现……

当我调整浏览器窗口的大小时，div就在彼此的顶部。当它不再适合时，他们应该中断到新的行。

为什么会发生这种情况，我如何防止它发生？

我遵循了文档，但我不明白它为什么要这样做。Bootstrap 3没有这个问题(我知道Bootstrap 4使用的是flexboxes)

.first-td-bold tr td:first-child {
  font-weight: bold;
  padding-right: 40px;
}

.no-wrap tr td {
  white-space: nowrap;
}

.no-wrap a {
  white-space: nowrap;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2">
        <nav class="nav nav-pills flex-column no-wrap">
          <a class="flex-sm-fill nav-link active" href="#">Alles</a>
          <a class="flex-sm-fill nav-link" href="#">Calculatie</a>
          <a class="flex-sm-fill nav-link" href="#">Opdracht</a>
          <a class="flex-sm-fill nav-link" href="#">Contract</a>
          <a class="flex-sm-fill nav-link" href="#">Meer- minderwerk</a>
        </nav>
      </div>
      <div class="col-md-10">
        <div class="row">
          <div class="col-md-4">
            <table class="table table-striped first-td-bold no-wrap">
              <tr>
                <td>Datum toegevoegd</td>
                <td>05-08-2017</td>
              </tr>
              <tr>
                <td>Bestandsnaam</td>
                <td>179358-Wanden.pdf</td>
              </tr>
              <tr>
                <td>Type</td>
                <td>PDF</td>
              </tr>
              <tr>
                <td>Grootte</td>
                <td>8.642,35 KB</td>
              </tr>
            </table>
          </div>
          <div class="col-md-8">
            <object data="myfile.pdf" type="application/pdf" width="100%" height="100%" style="background: #ddd;"></object>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

html

css

twitter-bootstrap

bootstrap-4

回答 1

Stack Overflow用户

发布于 2018-07-12 07:10:03

好的，这看起来就是你想要的。这是笔https://codepen.io/chris-hitchcock/pen/BPybej

我确实去掉了嵌套行，因为与您正在做的事情相比，它似乎可以忽略不计，但如果您需要将其放回原处，则非常简单。基本上只声明了第一个的宽度“col 2”，其余的都是col，以允许中断，但有内容流。我还在第一列添加了一些空白处，因为中间的一列正在挤压您的导航栏。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<body>
<div class="container-fluid">
        <div class="row">
            <div class="col-md-2 pad">
                <nav class="nav nav-pills flex-column no-wrap">
                    <a class="flex-sm-fill nav-link active" href="#">Alles</a>
                    <a class="flex-sm-fill nav-link" href="#">Calculatie</a>
                    <a class="flex-sm-fill nav-link" href="#">Opdracht</a>
                    <a class="flex-sm-fill nav-link" href="#">Contract</a>
                    <a class="flex-sm-fill nav-link" href="#">Meer- minderwerk</a>
                </nav>
            </div>
            <div class="col-md">
                <table class="table table-striped first-td-bold no-wrap">
                    <tr>
                        <td>Datum toegevoegd</td>
                        <td>05-08-2017</td>
                    </tr>
                    <tr>
                        <td>Bestandsnaam</td>
                        <td>179358-Wanden.pdf</td>
                    </tr>
                    <tr>
                        <td>Type</td>
                        <td>PDF</td>
                    </tr>
                    <tr>
                        <td>Grootte</td>
                        <td>8.642,35 KB</td>
                    </tr>
                </table>
            </div>
            <div class="col-md">
                <object data="myfile.pdf" type="application/pdf" width="100%" height="100%" style="background: #ddd;"></object>
            </div>
    </div>
</div>
</body>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51294512

复制

相似问题

问引导数据库4列未正确响应
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导数据库4列未正确响应EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导数据库4列未正确响应
EN