【发布时间】：2019-12-15 18:13:42
【问题描述】：
我正在尝试使用 flexbox 创建一个盒子，里面有三个较小的盒子。
以下代码适用于笔记本电脑的大屏幕显示器，但是，在移动屏幕下查看时，第三个框的宽度似乎更小。我检查了我的代码，但我没有看到我做了什么导致这个问题。因此我不确定这是否真的是一个弹性盒子问题？
从第二张截图中，您还会看到在 Firefox 下查看时，格式变得更差。我正在努力研究这是 FF 还是 flexbox 问题。
[wpv-layout-start]
[wpv-items-found]
<div class="row flexbox-wrap">
<!-- wpv-loop-start -->
<wpv-loop>
<div class="col-sm-4 flexbox-equalise">
<article class="well well-equal">
<h4>[wpv-post-title]</h4>
<p>[wpv-post-excerpt output="raw"]</p>
<p class="lead">[wpv-woo-product-price]</p>
<div class="well-actions [wpv-post-slug]">
[wpv-woo-buy-or-select add_to_cart_text="Join now!" class="btn-block"]
</div>
</article>
</div>
</wpv-loop>
<!-- wpv-loop-end -->
</div>
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
CSS 样式
/* The following code formats the modal box subscription results for services that can be selected after the Join Now button is pressed. This information is seen on the join now auth page as well as the signup page, its controlled by this toolset view, with the custom code above to pull back the results. */
.flexbox-equalise .well { position: relative; padding-bottom: 76px; }
.flexbox-equalise .well .well-actions {position: absolute; bottom: 0; left: 0; right: 0; text-align: -webkit-center; padding-bottom: 10px;}
.well-actions.school-nursery-plan {background-color: #fdd731; margin-top: 22px !important; padding-top: 12px;}
.well-actions.standard-yearly-plan {background-color: #db2230; margin-top: 22px !important; padding-top: 12px;}
.well-actions.standard-monthly-plan {background-color: #1e76b7; margin-top: 22px !important; padding-top: 12px;}
【问题讨论】：
-
如果你在电脑上调整浏览器窗口的大小，使页面进入移动版式，然后右键单击“月度计划”元素，可以在弹出窗口中选择“检查”（或类似的）。从那里您将能够看到元素及其属性/布局，并可以读出哪里出了问题。您还可以获取 HTML 和 CSS，创建一个可以与我们共享的代码 sn-p，重现问题，让我们更容易提供帮助。
-
我认为这是因为第三个框没有像所有其他框那样包含整行文本，因此它的宽度仅足以容纳文本。宽度：100% ??
标签： javascript html css flexbox