检查元素何时扩展父宽度

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中您可以声明某些屏幕尺寸的媒体查询，并且在该媒体查询中，您可以为仅适用于该屏幕尺寸的按钮添加不同的样式，例如，如果按钮没有按照您的意愿在移动屏幕尺寸上显示，您可以添加以下媒体查询，该查询将触发767px或更小的屏幕尺寸，如下所示：

@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的宽度，当您添加更多文本时，它仍然看起来整洁，而对于固定宽度，它不会给您灵活性。

以下是我添加的解决方案的更新链接： Fiddle

Answer 2

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

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

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

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

Answer 3

您可以使用CSS执行此操作。

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