使用 Bootstrap 4.4、Wordpress 和 Bootstrap Shortcodes Ultimate 插件的 Flexbox 列等高

Posted 2023-03-06

【中文标题】使用 Bootstrap 4.4、Wordpress 和 Bootstrap Shortcodes Ultimate 插件的 Flexbox 列等高

【英文标题】：Flexbox columns equal height using Bootstrap 4.4, Wordpress, & Bootstrap Shortcodes Ultimate plugin

【发布时间】：2021-04-22 11:32:12

【问题描述】：

我的 WordPress 5.6 模板使用 Bootstrap 4.4，并且还有 Bootstrap Shortcodes Ultimate 插件。

我有两列我想并排放置，即使在更改屏幕尺寸时也保持相同的高度。

由于它是一个 WordPress 网站，我使用 Bootstrap Shortcodes Ultimate 插件 来创建带有 shortcodes 的行和列，以使客户端更容易编辑列的内容（不会弄乱布局结构）。不幸的是，这意味着我无法将类添加到具有行或列的 div 中。

我认为这不会成为问题，因为 bootstrap 4.4 自然地使用了 flexbox，并且我认为我不需要添加任何额外的 css 来控制 flexbox 设置。

但情况似乎并非如此。

现在，使用每列中的当前措辞，列的大小相同，除非视口变小（例如：在 494 和 767 之间 - 最终一列的内容最终比其他）。

这是两列的 jsfiddle 示例：https://jsfiddle.net/SunnyOz/ofgp3n8d/24/。如果您将屏幕尺寸调整得足够小，您最终会看到随着列宽尺寸变小，第一列会比第二列长。

如果我在列上执行“检查元素”，这是我看到的 html 代码：

<div class="row">
    <div class="col">
        <div class="u-shadow-v3 font-bigger g-bg-yellow g-brd-around g-brd-gray-light-v4 g-line-height-2 g-pa-40 g-mb-30">Click here to review our approach to <a href="http://www.haregroup.com.au/performance_reward_management.asp">finding solutions to performance &amp; reward challenges</a>.
        </div>
    </div>

    <div class="col">
            <div class="u-shadow-v3 font-bigger g-bg-yellow g-brd-around g-brd-gray-light-v4 g-line-height-2 g-pa-40 g-mb-30">Click here to read about <a href="http://www.haregroup.com.au/generator/assets/when_has_good_performance_been_more_important_31july20sh.pdf" target="_blank" rel="noopener">a current challenge in&nbsp;performance &amp; reward management</a>.
           </div>
    </div>

</div>

这是我与列相关的 style.css 代码：

body 
font-family: 'Open-Baskerville-0053', 'Times New Roman', Georgia, serif;
font-size: 20px;
color: #333;


.font-bigger 
font-size: 1.2em;


.u-shadow-v3::after, .u-shadow-v3::before, .u-shadow-v4::before, .u-shadow-v5::after 
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);


.u-shadow-v3::after, .u-shadow-v3::before, .u-shadow-v4::before, .u-shadow-v5::after 
content: "";
position: absolute;
top: 80%;
left: 0.35714rem;
bottom: 1.07143rem;
width: 50%;
max-width: 21.42857rem;
background: rgba(0, 0, 0, 0.2);
z-index: -1;              



.g-pa-40 
padding: 2.85714rem !important;

.g-pa-40 
padding: 2.85714rem !important;

.g-mb-30 
margin-bottom: 2.14286rem !important;

.g-line-height-2 
line-height: 2 !important;

.g-brd-gray-light-v4 
border-color: #eee !important;

.g-brd-around 
border: solid 1px transparent !important;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;

.g-bg-white 
background-color: #fff !important;

.g-bg-yellow 
color: #000000;
background-color: #fffdca !important;
border-radius: 12px;


.g-bg-yellow a 
color: #008080;


.g-bg-yellow a:hover, .g-bg-yellow a:hover, .g-bg-yellow a:focus, .g-bg-yellow a:active 
color: #cc9900;


.u-shadow-v3, .u-shadow-v4, .u-shadow-v5 
position: relative;


.u-shadow-v3::after, .u-shadow-v5::after 
left: auto;
right: 0.35714rem;
-webkit-transform: rotate(3deg);
transform: rotate(3deg);

以下是从“检查元素”样式部分显示的一些 css，这些 css 取自除我的主要 style.css 之外的其他 .css 文件 - 这也与行/列的样式有关。

css 来自 _grid.scss:45:

.row 
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;

和来自 _grid-framework.scss:31 的 css

.col 
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;

和来自 _grid-framework.scss:8 的 css

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto 
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;

和来自 bootstrap.css 的 css：40

*, ::after, ::before 
box-sizing: border-box;

如您所见，似乎正在设置 flex 代码（由本机引导程序拉入） ​​- 如：display: flex;、flex-wrap: wrap;flex-basis: 0; 和 flex-grow: 1;。

那么我错过了什么？

正如我之前提到的，我无法将类添加到 <div class="row"> 或 <div class="col">，因为这是由插件的短代码控制的。

不管屏幕尺寸是多少，我是否可以让列始终保持相等 - 使用我的设置？

【参考方案1】：

你能检查下面的代码链接吗？希望它对你有用。您只需将高度设置为 .u-shadow-v3, .u-shadow-v4, .u-shadow-v5 就像..

.u-shadow-v3, .u-shadow-v4, .u-shadow-v5 
    position: relative;
    height: calc(100% - 2.14286rem);

请参考此链接：https://jsfiddle.net/yudizsolutions/q8orcv2j/5/

【讨论】：

哇.. 非常感谢。我认为添加高度参数会影响响应能力，但它似乎不会干扰它。一切都像魅力一样！只是出于好奇，由于阴影大小，是否需要在此位置进行计算？

首先，我们很高兴，我们的解决方案帮助了您...这个计算不是由于阴影大小。它取决于边距底部（“g-mb-30”类）。如果您将 margin-bottom 设置为 30，则高度将为“calc(100% - 32px)”。