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

为什么我的列不合适？引导程序和 CSS

  • 772

我正在此链接上为一家公司创建一个网站。但是，如果您输入的属性名称超过 2 行，则每个框都会错位。

我试图用 a 来修复它，white-space:nowrap他们适应了，但显然这不是正确的事情，因为单词重叠。

css

5 Answers

  1. Best Answer

    项目显示如下（见整页）：

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

    问题是您将所有元素放在同一行中，这使得 Bootstrap 可以按照它认为合适的方式排列它们。要将它们保留在其列中，您可以为每个组创建一行，例如：

    .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. 您是否尝试过在 .row 中封装 4 个属性组？

    即...

    <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. 在使用 Bootstrap 时，清楚网格的工作原理非常重要。

    在 Bootstrap 网格中，度量单位是“列”，总共 12 个，形成一行，我给你一些例子：

    示例 1：

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

    示例 2：

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

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

    如您所见，所有行都由 12 列组成。如果不遵守这一点，列将错位，因为它们有空间这样做，并且因为它们在一行（行）内没有很好地声明

    看看 Bootstrap 的网格系统的官方文档http://getbootstrap.com/css/#grid-example-basic

    • 2

  4. text-overflow: ellipsis;测试与 一起调用的属性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. 您为什么不尝试使用该库masonry，它的作用是对所有框进行分组，而不会按高度从一个框跳到另一个框

    我给你一个例子和图书馆的链接：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'
});

    但你也可以做的是min-height在盒子里添加一个

    希望这可以帮到你

    • 1