如何使Bootstrap 4按钮的一列宽度响应？

Question

我正在尝试创建一个垂直列的按钮。 我已经按照我想要的方式看它了-但是当屏幕不是lg时，按钮都没有响应。 我希望它们自动缩小到包含它们的div。我在这里查看： 如何使按钮在列的宽度上伸展，以及在此处： 如何使按钮在引导程序中具有响应性？ 都没有帮助。 我也尝试将列大小也添加到div中-没有骰子。

我的代码-

CSS：

    body {
        height: 100%;
        width: 100%;
    }
    #button-container {
        height: 75vh;
        width: 10%;
        margin: 5% 2.5% 0 5%;
        background-color: aquamarine;
    }
    #button-group {
        height: 100%;
        width: 100%;
    }
    button {
        height: inherit;
        max-width: 100%;
        word-wrap: break-word;
        display: block;
    }

HTML：

<div id="button-container" class="container">
<div id="button-group" class="btn-group btn-group-vertical btn-group-lg" 
role="group">
    <button id="about" type="button" class="btn">About</button>
    <button id="resume" type="button" class="btn">Resume</button>
    <button id="works" type="button" class="btn">Works</button>
    <button id="contact" type="button" class="btn">Contact</button>
</div>
</div>

JsFiddle链接： https ://jsfiddle.net/TravellingPumpkin/hs227bup/6/

Answer 1

由于您使用的是Bootstrap，为什么不使用网格系统进行响应式调整？ 这些是内置的，不需要自定义CSS，只需一些类。 您可以为不同的屏幕尺寸选择不同的网格尺寸，并且一切都很好地融合在一起。 网格系统分为12个

对于您的示例，您可以删除width CSS并用一些网格类代替。

<div id="button-container" class="container">
  <div class="row">
    <div class="col-sm-6 col-lg-4 col-xl-3">
      <div id="button-group" class="btn-group btn-group-vertical btn-group-lg" role="group">
        <button id="about" type="button" class="btn">About</button>
        <button id="resume" type="button" class="btn">Resume</button>
        <button id="works" type="button" class="btn">Works</button>
        <button id="contact" type="button" class="btn">Contact</button>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/hs227bup/7/

在上面的示例中，这可能并不是您想要的，但这只是一个起点，我在组中的类row添加了<div> ，然后在其中添加了带有网格类的另一个div 。

col-sm-6表示在“小”断点处其宽度为50％。

col-lg-4表示在“大”断点处它将具有33％（4/12）的宽度。

col-xl-3表示在“特大”断点处宽度为25％（3/12）。

通过尝试这些值，我想您可以按需要对它进行排序。