Bootstrap - 特定断点下方的中心行内容答案

【问题标题】：Bootstrap - Center row content below certain breakpointBootstrap - 特定断点下方的中心行内容
【发布时间】：2023-04-07 22:37:01
【问题描述】：

我在 bootstrap v4 中有以下网格系统：

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-auto align-self-center">
            <img src="test" class="logo img-responsive">
        </div>
        <div class="col-sm-auto align-self-center">
            <table class="table-responsive">
                <tbody>
                    <tr><td></td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

对于大于“小”的屏幕，图片应与表格并排放置，对于较小的屏幕，应将它们堆叠起来。这非常有效。

目前，一切都是左对齐的。当列并排（屏幕>“小”）时，我希望行左对齐，但在列堆叠时居中（屏幕

我尝试将 justify-content-center 添加到该行，但这会将两个配置居中（直到屏幕变得特别小，此时它再次左对齐...）

不是特别有用（因为屏幕总是很小）小提琴：https://jsfiddle.net/aq9Laaew/133123/

【问题讨论】：

标签： css bootstrap-4

【解决方案1】：

您可以使用ml-lg-0 mr-lg-0 类覆盖某些屏幕尺寸的左右边距（将“lg”替换为您希望内容开始左对齐的屏幕尺寸）。这样您就可以使用mx-auto 将内容集中在小屏幕尺寸上，但在视口达到一定宽度时将其左对齐。

【讨论】：

【解决方案2】：

使用col-sm-auto 的问题是在<sm 屏幕上的列变成全宽，因此表格是全宽的，不会出现居中。

相反，在第二列使用col-auto col-sm mx-auto，使其缩小到<sm屏幕上的表格宽度...

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-auto text-center">
            <img src="//gradientjoy.com/300x200" class="logo img-fluid">
        </div>
        <div class="col-auto col-sm mx-auto">
            <table class="table-responsive">
                <tbody>
                    <tr><td>test</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

https://www.codeply.com/go/0n3i9EGgS7

【讨论】：

【解决方案3】：

    .row {
      background: #f8f9fa;
      margin-top: 20px;
    }
    
    .col {
      border: solid 1px #6c757d;
      padding: 10px;
    }
    tbody {
      display:inline;
      width:100%;
    }
    @media only screen and (max-width: 768px) {
        .row, table {
            text-align:center;
        }
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-sm-auto align-self-center">
                <img src="test" class="logo img-responsive">
            </div>
            <div class="col-sm-auto align-self-center">
                <table class="table-responsive">
                    <tbody>
                        <tr><td>test</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

试试这个代码...我也提到了 jsfiddle 链接...它适合你。

新增样式如下，

tbody {
  display:inline;
  width:100%;
}
@media only screen and (max-width: 768px) {
    .row, table {
        text-align:center;
    }
}

https://jsfiddle.net/Sampath_Madhuranga/2sk5bf7t/1/

【讨论】：

【解决方案4】：

您应该使用 .mx-lg-auto 或 .mx-md-auto 类（取决于您喜欢的断点）。

文档here。

【讨论】：