css - 检查元素何时扩展父级宽度

Question

不知道如何解释这个，但我开始了:

我有 2 个按钮(宽度可变，取决于里面的文本)，它们彼此相邻(上图)。当我缩小屏幕时(底部图片)，按钮会扩展父项的宽度和位置。有没有办法检查这种情况何时发生？

我想设置一个边距(这样按钮就不会粘在一起)并设置一个固定的宽度，只有当按钮位于彼此下方时，因为设计原因。

据我所知，每个浏览器的呈现方式都略有不同，而且我还想要一个在我决定更改按钮文本时仍能正常工作的解决方案。

你会怎么做？是否有插件或简单的 jQuery 脚本可以对此进行检查？

这是我目前所拥有的:JSFiddle

<div class="cta-buttons-wrapper text-center">
  <a href="/profiles" class="btn btn-primary">this is button one</a>
  <a href="/register" class="btn btn-primary-reversed">and button two</a>
</div>


.cta-buttons-wrapper{ margin: 40px auto; }
.cta-buttons-wrapper .btn{ margin: 0 15px; }

.btn{
    margin: auto 25px;
    // ...
}

.btn-primary{
    color: #fff;
    background-color: lightgreen;
    border-color: lightgreen;
}

.btn-primary-reversed{
    color: lightgreen;
    background-color: #fff;
    border-color: lightgreen;
}

Answer 1

如果你不想粘贴按钮添加以下 css

.cta-buttons-wrapper .btn{ margin: 10px 15px; }

对于按钮宽度，您需要使用媒体查询为其设置特定宽度

@media (max-width: 767px) {
  .cta-buttons-wrapper .btn
  {
    display:block;
    width:60%;
  }
}