BS4 - 向右浮动第一列答案

【问题标题】：BS4 - float 1st column to rightBS4 - 向右浮动第一列
【发布时间】：2019-10-11 19:21:46
【问题描述】：

我正在使用 bootstrap4，我需要在中型设备中将第一个 div 列向右浮动，而在移动设备上它首先显示。在 bootstrap3 中可能具有如下结构，但由于 bs4 现在使用 flex，它似乎不起作用。知道如何实现这一目标吗？

<div class="row">
    <div class="col-12 col-md-8 float-right">
         //RIGHT BANNER HERE
    </div>
    <div class="col-12 col-md-4">
        //SOME CONTENTS
    </div>
</div>

【问题讨论】：

行上的两个div都是col-12，你确定这是你想要的吗？

标签： css bootstrap-4

【解决方案1】：

您不需要额外的 CSS。

在 Bootstrap 4 中，row 是 display:flex，因此您可以使用 d-md-block（display:block on md 及更高版本）覆盖 row 中的 display:flex。

<div class="row d-md-block">
    <div class="col-12 col-md-8 float-right">
         //RIGHT BANNER HERE
    </div>
    <div class="col-12 col-md-4">
        //SOME CONTENTS
    </div>
</div>

https://www.codeply.com/go/jjs8RFfwpX

【讨论】：

【解决方案2】：

.row 默认带有display:flex;，您可以使用!important 覆盖它们以取消效果。

.row{display:block!important;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-12 col-md-8 float-right">
         //RIGHT BANNER HERE
    </div>
    <div class="col-12 col-md-4">
        //SOME CONTENTS
    </div>
</div>

ps：查看完整尺寸的输出

【讨论】：

为什么要添加额外的 CSS？ d-md-block 是 display:block。
直接使用 !important 不是一个明智的选择，我支持@Themes.guide

【解决方案3】：

示例中的 HTML 结构看起来很奇怪，您在两个容器中都使用了 col-12。我假设您希望横幅位于右侧而不是四处飘荡，只是为了在那里，为什么不只是更改一下您的 HTML。

类似

html {
    padding: 20px;
}

.banner, .main {
    border: solid 1px grey;
}

<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-8 col-md-10 main">
        // SOME CONTENTS
    </div>
	<div class="col-4 col-md-2 banner">
        // RIGHT BANNER HERE
    </div>
</div>

让我知道这是否适合你

【讨论】：

嗨，我将不得不对此投反对票。该结构应该是响应式“移动优先”。我需要的是 right_banner 应占满 12 列，并且当它位于 xs 到 sm 视口时位于 main_content 上方。因此有必要在主要内容之上用 col-12 声明它。带有 col-12 的 main_cont 也是如此，并且位于 right_banner 下方。 @zim 的答案应该是这个的实现。
我建议您在问题中澄清这类事情，因为您在这里提到的任何内容都没有出现在原始问题中。在更新之前对问题投反对票。