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

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

这可以在不需要 jQuery 插件的情况下实现，在 CSS 中，您可以为特定屏幕尺寸声明媒体查询，并且在该媒体查询中，您可以为按钮添加不同的样式这仅适用于该屏幕尺寸，例如，如果按钮在移动屏幕尺寸上未按您希望的方式显示，您将添加以下媒体查询，该查询将在屏幕尺寸为 767 像素或更小时触发，如下所示：

@media (max-width: 767px) {
  .cta-buttons-wrapper .btn {
    display:block;
    width: 100%; /* this will make the buttons span the width of the parent div */
    margin: 0 0 30px 0;
  }
}

我已经声明 width: 100%; 以便按钮跨越父 div 的宽度仅在移动设备上，当您添加更多文本时它仍然看起来整洁，而固定宽度时它确实如此没有给你那种灵活性。

这是一个更新后的 link 到您的 fiddle 与我添加的解决方案： Fiddle

Answer 2

您只需使用 CSS 即可。

@media (max-width: 767px) {
   .btn {
     margin: 25px;
   }
}

Answer 3

如果您不想粘贴按钮，请添加以下内容css

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

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

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

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

Check when elements expand parent width

css

position

twitter-bootstrap