Question

我在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/

Answer 1

使用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

Answer 2

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

文档here。

Answer 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/

Answer 4

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

Bootstrap-将行内容置于某些断点以下

4 个答案: