时间戳

首页 > 解决方案 > 强制列保持在右侧（向右浮动）

html - 强制列保持在右侧（向右浮动）

问题描述

这是应该的 我在一行中有三列。每列都是 lg-6，这使得最后一列跨度低于其他两列。使用 float-right 将此列放置在右侧。但是，每当最后一列（第 2 列）上方的列比第一列获得更多内容时，最后一列（第 3 列）就会向左移动（如下图所示）。有什么方法可以防止列像这样移动吗？强制它保持正确。

Columnt 向左移动

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row d-md-block mt-4 mx-n3 px-4">
        <div class="card col-lg-6 col-sm-12 mx-n1 float-left">
            <div class="card-header screensCardHeader">
                <h4 class="m-0 font-weight-bold text-header">Column 1</h4>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="table_0_view" class="table" width="100%" cellspacing="0">
                        <thead class="screensThead">
                            <tr>
                                <th>#</th>
                                <th>Namn</th>
                            </tr>
                        </thead>
                        <tbody id="tbody_0_view" class="screenstable screenstableque">
                            
                            <tr id="2" sport="0" class="screenstablerow">
                                <td class="viewtd row-id-0">1</td>
                                <td>Person 1</td>
                            </tr>
                            
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
        
        <div class="card col-lg-6 col-sm-12 mx-n1 float-right order-1">
            <div class="card-header screensCardHeader">
                <h4 class="m-0 font-weight-bold text-header">Column 2</h4>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="table_1_view" class="table" width="100%" cellspacing="0">
                        <thead class="screensThead">
                            <tr>
                                <th>#</th>
                                <th>Namn</th>
                            </tr>
                        </thead>
                        <tbody id="tbody_1_view" class="screenstable screenstableque">
                            
                            <tr id="3" sport="1" class="screenstablerow">
                                <td class="viewtd row-id-1">1</td>
                                <td>Person 2</td>
                            </tr>
                            <tr id="4" sport="1" class="screenstablerow">
                                <td class="viewtd row-id-1">1</td>
                                <td>Person 3</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
        
        <div class="card col-lg-6 col-sm-12 mx-n1 float-right justify-content-end">
            <div class="card-header screensCardHeader">
                <h4 class="m-0 font-weight-bold text-header">Column 3</h4>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="table_2_view" class="table" width="100%" cellspacing="0">
                        <thead class="screensThead">
                            <tr>
                                <th>#</th>
                                <th>Namn</th>
                            </tr>
                        </thead>
                        <tbody id="tbody_2_view" class="screenstable screenstableque">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

不要使用 float 属性，而是d-flex在父级中使用。

并ml-auto在第 3 列中使用

更新 - 关于 OP 评论

但这意味着第 1 列将跟随第 2 列的高度，对吗？那么，在第 2 列中添加内容时，有什么方法可以隐藏第 1 列中出现的空格？

答：align-items-start在rowdiv中使用

此外，左右列之间的间距似乎消失了。我之前在 mx-n1 中使用了 1 的负边距。使用 d-flex 时有什么办法可以恢复？根据上次引导的文档使用，负边距：getbootstrap.com/docs/4.5/utilities/spacing

答：在card里面使用实用程序类col-*-*而不是与它一起使用

注意：width不cellspacing推荐使用属性

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row d-flex mt-4 px-4 align-items-start">
    <div class="col-lg-6 col-sm-12 mb-4">
      <div class="card">
        <div class="card-header screensCardHeader">
          <h4 class="m-0 font-weight-bold text-header">Column 1</h4>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table id="table_0_view" class="table">
              <thead class="screensThead">
                <tr>
                  <th>#</th>
                  <th>Namn</th>
                </tr>
              </thead>
              <tbody id="tbody_0_view" class="screenstable screenstableque">

                <tr id="2" sport="0" class="screenstablerow">
                  <td class="viewtd row-id-0">1</td>
                  <td>Person 1</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-6 col-sm-12 mb-4">
      <div class="card">
        <div class="card-header screensCardHeader">
          <h4 class="m-0 font-weight-bold text-header">Column 2</h4>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table id="table_1_view" class="table">
              <thead class="screensThead">
                <tr>
                  <th>#</th>
                  <th>Namn</th>
                </tr>
              </thead>
              <tbody id="tbody_1_view" class="screenstable screenstableque">

                <tr id="3" sport="1" class="screenstablerow">
                  <td class="viewtd row-id-1">1</td>
                  <td>Person 2</td>
                </tr>
                <tr id="4" sport="1" class="screenstablerow">
                  <td class="viewtd row-id-1">1</td>
                  <td>Person 3</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>


    <div class="col-lg-6 col-sm-12 ml-auto mb-4">
      <div class="card">
        <div class="card-header screensCardHeader">
          <h4 class="m-0 font-weight-bold text-header">Column 3</h4>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table id="table_2_view" class="table">
              <thead class="screensThead">
                <tr>
                  <th>#</th>
                  <th>Namn</th>
                </tr>
              </thead>
              <tbody id="tbody_2_view" class="screenstable screenstableque">
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

推荐阅读