Question

我正在尝试创建一个垂直的按钮列。我已经让它看起来像我喜欢的方式 - 但是当屏幕不是lg时按钮没有响应。我希望他们自动收缩到他们所包含的div。我看过这里：How to make a button stretch across the width of a column 在这里：How to make buttons responsive in bootstrap? 而且都没有帮助。我也尝试过为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，为什么不使用Grid System进行响应式调整？它们是内置的，不需要自定义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/

在上面的示例中，可能并不完全是您想要的，但它是一个起点，我已经添加了<div>类row在你的小组周围，然后在网格类中添加了另一个div。

col-sm-6表示在“小”的情况下，它的宽度为50％。断点。

col-lg-4表示在＆＃39;大＆＃39;的宽度为33％（4/12）断点。

col-xl-3表示超大＆＃39;的宽度为25％（3/12）断点。

通过试验这些值，我想你可以按照你想要的方式对它进行分类。

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

1 个答案: