SCSS 可以检测容器的 2 个子元素是放在同一行还是分成 2 行？

Posted 2023-03-06

【中文标题】SCSS 可以检测容器的 2 个子元素是放在同一行还是分成 2 行？

【英文标题】：Can SCSS detect if 2 child elements of a container are placed on the same row or split over 2 rows?

【发布时间】：2019-12-15 21:38:32

【问题描述】：

我有一个容器 div，里面有 2 个按钮，在我网站的多个地方使用，按钮上有不同的内容。理想情况下，它们应该彼此相邻放置，但如果按钮中的文本太大，它们将被分成 2 行，位于彼此下方。在这种情况下，它们之间应该有 10px 的边距。 我不知道这是否有任何区别，但我使用的是 Bootstrap 3 和 SCSS。 有没有办法在 SCSS 中设置一个条件，仅当它们显示在 2 行时才将此边距底部添加到第一个元素？

我也尝试过简单地将 margin-top: 10px 添加到两个按钮，但是我有一个不必要的额外边距。

我也在考虑计算子元素（按钮）的总宽度并检查它是否超过容器的宽度，但我不知道如何在不使用 javascript 的情况下实现这一点。

【问题讨论】：

no css 无法检测按钮是否超过两行，您只需向具有较长文本的按钮（或旁边的第一个按钮）添加一个类，然后您可以添加边距最重要的是，如果你不能这样做，那么你可能需要一些js来做你的检测

【参考方案1】：

您可以使用纯 html/CSS 做到这一点。将您的两个按钮包裹在两个 div 中，一个外部和一个内部。

将 Flexbox 布局应用于外部 div。 为内部 div 添加负边距。 为按钮设置正边距，等于内部 div 的负边距。

.outer-wrapper 
  background: #ddd;
  display: flex;


.inner-wrapper 
  margin: -10px;


.btn 
  margin: 10px;


/* Test the button wrapping */
.narrow-wrapper 
  width: 20rem;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="outer-wrapper">
  <div class="inner-wrapper">
    <button type="button" class="btn btn-primary">Button with a lot of content inside</button>
    <button type="button" class="btn btn-primary">Another button</button>
  </div>
</div>

<br>

<div class="outer-wrapper narrow-wrapper">
  <div class="inner-wrapper">
    <button type="button" class="btn btn-primary">Button with a lot of content inside</button>
    <button type="button" class="btn btn-primary">Button below the first one</button>
  </div>
</div>