【问题标题】:Bootstrap - I don't want columns to have the same heightBootstrap - 我不希望列具有相同的高度
【发布时间】:2017-11-26 09:43:31
【问题描述】:

在这个 bootstrap 4 示例中,2 列具有相同的高度。 我不想要这个。 有没有快速解决这个问题的方法?

    <div class="col-lg-3 card bg-faded">
      <h1><small>Some favorites</small></h1>
      <ul>
        <li>Celery root</li>
        <li>Spaghetti Squash</li>
        <li>Killer Mushrooms</li>
      </ul>
    </div>

    <div class="col-lg-9">
      <h1>Wild & Wicky Vegetables</h1>
      <p>Kale c.....t.</p>
    </div>
</div><!--row-->

【问题讨论】:

    标签: twitter-bootstrap bootstrap-4 bootstrap-5


    【解决方案1】:

    引导程序 5(2021 年更新)

    Bootstrap 5 仍然基于 flexbox,因此一行中的列高度相等。因此 d-block 仍然可以用来“禁用”flexbox 并使用float-start 来浮动列。

    Bootstrap 4(原始答案)

    是的,您可以在行上使用 d-block,在列上使用 float-left,使其以 Bootstrap 3.x 方式工作,使用浮动列而不是 flexbox..

    <div class="row d-block">
        <div class="col-lg-3 float-left">
            ..
        </div>
        <div class="col-lg-9 float-left">
            ..
        </div>
    </div>
    

    https://codeply.com/go/Ghhq1NbMDG


    相关:
    Bootstrap 4 Columns float style like Bootstrap 3 is it possible?
    Empty vertical space between columns in Bootstrap 4

    【讨论】:

      【解决方案2】:

      实际上,一个更简单的解决方案是将“h-100”类添加到您不想与其共享相同高度的列中。这使得列自身的高度为 100%,不共享行中另一列的高度。

      【讨论】:

        猜你喜欢
        • 2013-01-17
        • 2016-10-01
        • 1970-01-01
        • 2020-11-10
        • 1970-01-01
        • 2015-11-27
        • 2015-09-04
        • 2020-12-04
        相关资源
        最近更新 更多