I do not know why, but well stands apart from the whole cell. What have I done wrong?

enter image description here

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <div class="container"> <div class="row-fluid"> <div class="col-md-8"> <div class="well"> <div class="row-fluid"> <div class="col-md-6"> <div> text </div> <div> text </div> <div> text </div> </div> <div class="col-md-6"> <div> text </div> <div> text </div> <div> text </div> </div> </div> <div class="row-fluid"> <div class="col-md-8 col-md-offset-2"> <button type="button" class="btn btn-lg btn-success btn-block" id="success">Продолжить</button> </div> </div> </div> </div> </div> </div>

If you remove the bottom button and the surrounding <div class="col-md-8 col-md-offset-2"> , then everything works as it should. Bootstrap 3.3.6.

  • What result are you trying to achieve? Better to show a picture. - stackanon
  • .row-fluid does not have a class .row-fluid . How is he defined? - Gleb Kemarsky
  • You are right, changed row-fluid to row and everything worked as it should, for some reason I used to think that there is a rubber row row :) - user193361

1 answer 1

On a wide screen, bootstrap columns get the float: left; property float: left; and the parent block collapses. There are two common ways to fight :

Clearfix

Bootstrap sets the .row class with the .row properties:

 .row:before, .row:after { display: table; content: " "; } .row:after { clear: both; }

Please note that there is no .row-fluid class in bootstrap.css .

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-md-8"> <div class="well"> <div class="row"> <div class="col-md-6"> <div> text </div> <div> text </div> <div> text </div> </div> <div class="col-md-6"> <div> text </div> <div> text </div> <div> text </div> </div> </div> <div class="row"> <div class="col-md-8 col-md-offset-2"> <button type="button" class="btn btn-lg btn-success btn-block" id="success">Продолжить</button> </div> </div> </div> </div> </div> </div>

Overflow

If you add the overflow: hidden; property to the parent block overflow: hidden; , it will calculate its height taking into account the floating descendants:

 .well { overflow: hidden; } 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <div class="container"> <div class="row-fluid"> <div class="col-md-8"> <div class="well"> <div class="row-fluid"> <div class="col-md-6"> <div> text </div> <div> text </div> <div> text </div> </div> <div class="col-md-6"> <div> text </div> <div> text </div> <div> text </div> </div> </div> <div class="row-fluid"> <div class="col-md-8 col-md-offset-2"> <button type="button" class="btn btn-lg btn-success btn-block" id="success">Продолжить</button> </div> </div> </div> </div> </div> </div>

  • The problem was in row-fluid, add this answer, I’ll mark it correct - user193361
  • @ user193361 Updated the answer. - Gleb Kemarsky