Home / Questions / 20088
Accepted
Hoose
Asked: 2020-08-10 18:39:00 +0800 CST 2020-08-10 18:39:00 +0800 CST

Why do my columns get out of place? Bootstrap and CSS

  • 772

I am creating a website for a company at this link . However, each box is misaligned if you enter the name of a property with more than 2 lines.

I tried to fix it with a white-space:nowrapand they accommodated, but obviously it's not the right thing because the words overlap.

css

5 Answers

  1. Best Answer

    Items are being displayed like this (see full page):

        .propertyItem {
         box-shadow: 1px 1px 5px black;
         margin-bottom: 50px;
         border-radius: 5px;
    }

    .propertyItem h4 {
         font-weight: bolder;
         text-align: center;
         padding: 5px 10px;
         margin-bottom: 0;
         font-size: 1em;
    }
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

      <section class="container-fluid">
        <div class="container">
          <div class="row">
            <div class="col-md-12">
              <div class="row">

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>Columna 1 con texto extenso que abarca múltiples líneas</h4>
                  </div>
                </div>

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>columna 2</h4>
                  </div>
                </div>

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>columna 3</h4>
                  </div>
                </div>

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>columna 4</h4>
                  </div>
                </div>



                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>columna 1</h4>
                  </div>
                </div>

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>columna 2</h4>
                  </div>
                </div>

              </div>

            </div>
          </div>
        </div>
      </section>

    The problem is that you are putting all the elements in the same row, this makes Bootstrap arrange them as it sees fit. To keep them in their column you can create a row for each group, example:

    .propertyItem {
         box-shadow: 1px 1px 5px black;
         margin-bottom: 50px;
         border-radius: 5px;
    }

    .propertyItem h4 {
         font-weight: bolder;
         text-align: center;
         padding: 5px 10px;
         margin-bottom: 0;
         font-size: 1em;
    }
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

      <section class="container-fluid">
        <div class="container">
          <div class="row">
            <div class="col-md-12">
              <div class="row">

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>Columna 1 con texto extenso que abarca múltiples líneas</h4>
                  </div>
                </div>

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>columna 2</h4>
                  </div>
                </div>

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>columna 3</h4>
                  </div>
                </div>

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>columna 4</h4>
                  </div>
                </div>
                
              </div>

              <div class="row">

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>columna 1</h4>
                  </div>
                </div>

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>columna 2</h4>
                  </div>
                </div>

              </div>
              
            </div>
          </div>
        </div>
      </section>

    • 2

  2. Have you tried encapsulating groups of 4 properties inside a .row?

    Namely...

    <div class="row">
    <div class="propiedad">...</div>
    <div class="propiedad">...</div>
    <div class="propiedad">...</div>
    <div class="propiedad">...</div>
</div>

<div class="row">
    <div class="propiedad">...</div>
    <div class="propiedad">...</div>
    <div class="propiedad">...</div>
    <div class="propiedad">...</div>
</div>
    • 2

  3. It is very important to be clear about how the grid works when using Bootstrap.

    In the Bootstrap grid, the unit of measure is "Columns" being a total of 12 which forms a row, I give you some examples:

    Example 1:

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

    Example 2:

    <div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-8"></div>
    <div class="col-md-2"></div>
</div>

    Example 3:

    <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
</div>

    As you can see, all the rows are made up of 12 columns. If you do not comply with this, the columns will be disarranged because they have space to do so, and because they are not well declared within a row (row)

    Take a look at the official documentation for Bootstrap's grid system http://getbootstrap.com/css/#grid-example-basic

    • 2

  4. Test a property that is called text-overflow: ellipsis;together with overflow: hidden;.

    <div>
  <h3>Sin <code>text-overflow: ellipsis</code></h3>
    <p style="max-width: 250px; white-space: nowrap; overflow: hidden;">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

<hr>

<div>
  <h3>Con <code>text-overflow: ellipsis</code></h3>
    <p  style="max-width: 250px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

    • 1

  5. Why don't you try to use the library masonry, what it does is group all the boxes without there being jumps from one to another by height

    I leave you an example and the link to the library: http://masonry.desandro.com/

    <div class="row">
  <div class="col-lg-4">...</div>
  <div class="col-lg-4">...</div>
  <div class="col-lg-4">...</div>
  ...
</div>
<script src="/path/to/masonry.pkgd.min.js"></script>
$('.row').masonry({
  // options
  itemSelector: '.col-lg-4'
});

    But also what you can do is add a min-heightto the boxes

    Hope this can help you

    • 1