Why doesn't the whole cell go well?



  • I don't know why, but well, it's a mansion from the whole cell. What did I do wrong?

    введите сюда описание изображения

    <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 lower button and surrounding it <div class="col-md-8 col-md-offset-2">it works properly. Bootstrap 3.3.6.



  • On a wide screen, the Bhutanese columns receive properties float: left; and the parent block is closing. There are two spreaders. https://webref.ru/layout/advanced-html-css/detailed-css-positioning :

    Clearfix

    Boothstrup wants class. .row such properties:

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

    Call attention to class. .row-fluid Total https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css No.

    <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 a parent block the properties overflow: hidden;, he'll calculate his height with the account of 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>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2