CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Ramon Bakker
Ramon Bakker

Reputation: 1085

Bootstrap 4 columns not correctly responsive

I recently started using Bootstrap 4 instead of 3. The first problems start to appear...

When i resize the browser window, the divs are getting on top of eachother. They should break to a new row when it does'nt fit anymore.

Why is the happening and how can i prevent it?

Ill followed the docs, but i can't figure out why its doing this. Bootstrap 3 did'nt had this problem (i know, Bootstrap 4 is using 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>

Upvotes: 0

Views: 155

Answers (1)

Chris Hitchcock
Chris Hitchcock

Reputation: 399

Ok so this seems to do what you are looking for. Here's the pen https://codepen.io/chris-hitchcock/pen/BPybej

I did take out the nested row because it seemed negligible with what you are doing, but if you need to put it back, pretty simple. Basically only declared the width of your first one "col-md-2" the rest are col-md to allow the break but have content flow. Also added a little margin to the first column as the middle column was squishing into your navbar.

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

Upvotes: 1

Related Questions