Question

我最近开始使用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>

Answer 1

好的，这似乎可以满足您的需求。这是笔https://codepen.io/chris-hitchcock/pen/BPybej

我确实删除了嵌套行，因为它与您正在执行的操作似乎可以忽略不计，但是如果您需要放回去，则非常简单。基本上只声明了第一个“ col-md-2”的宽度，其余的都是col-md，以允许中断但具有内容流。由于中间列正在挤压您的导航栏，因此也为第一列增加了一点空白。

<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>

Bootstrap 4列响应不正确

1 个答案: