I' three elements in the row, bootstrap.


  • QA Engineer

    It seemed quite simple, but there were nails. ♪ We need to do 3 columns on the front page. div With categories, I did this in a way:

    <div class="row">
      <div class="container">
        <div class="col-md-4">content</div>
        <div class="col-md-4">content</div>
        <div class="col-md-4">content</div>
      </div>
    </div>
    

    In most cases, it's been in three columns, but if the div content content content is more than the div mark, then the div's trail will be built on each other instead of moving to its place. About: введите сюда описание изображения

    UPD: https://plnkr.co/edit/fUEyQYIIxpPX8fOoTIaj?p=preview Can you tell me you don't need to move?

    UPD UPD: eventually, I wrote to the zs:

      @media (min-width: 992px) {
    .col-md-4:nth-child(3n+1) {
      clear: left;
    }
      }
    

    I don't know how well that's gonna be, but it's been great in solving my problem.



  • .container {
      padding: 5px;
    }
    .col-xs-4 {
      border: 1px solid #ccc;
    }
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="row">
      <div class="container">
        <div class="col-xs-4">content</div>
        <div class="col-xs-4">content</div>
        <div class="col-xs-4">content</div>
      </div>
    </div>
    <div class="row">
      <div class="container">
        <div class="col-xs-4">content2<br>content<br>content<br></div>
        <div class="col-xs-4">content2</div>
        <div class="col-xs-4">content2<br>content<br>content<br><br>content<br>content<br></div>
      </div>
    </div>
    <div class="row">
      <div class="container">
        <div class="col-xs-4">content</div>
        <div class="col-xs-4">content</div>
        <div class="col-xs-4">content</div>
      </div>
    </div>

    Class row means everything else will be on the new line. Bring the real code, please, then you can talk about something.




Suggested Topics

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