Bootstrap：按钮宽度为33％，当窗口太小时100％

Question

我有三个按钮，我希望它们在同一条线上，占据所有空间，每个按钮必须具有相同的尺寸。
一旦窗口太小而无法显示至少170px宽度的每个按钮，我希望每个按钮都有自己的线并占据100％。 我记得看到有导航条的网站有点像这样......

这就是我的代码目前的样子：

        <div class="modal-body"> 
          <button style="min-width:33%;width:170px" type="submit" class="btn btn-primary btn-group">Button A</button><span></span>
          <button style="min-width:33%;width:170px" type="submit" class="btn btn-primary btn-group">Button B</button><span></span>
          <button style="min-width:33%;width:170px" type="submit" class="btn btn-primary btn-group">Button C</button>
        </div>

第一部分似乎工作正常，但是当窗口太小时，按钮的线条宽度不会达到100％：

是否有引导方式来实现这一目标？或者是必要的css hack？

Answer 1

我会重写HTML看起来像这样。

<div class="modal-body"> 
    <div class="row">
        <div class="col-lg-4 col-sm-12">
            <button style="width:100%" type="submit" class="btn btn-primary btn-group">Button A</button>
        </div>
        <div class="col-lg-4  col-sm-12">
            <button style="width:100%" type="submit" class="btn btn-primary btn-group">Button A</button>
        </div>
        <div class="col-lg-4  col-sm-12">
            <button style="width:100%" type="submit" class="btn btn-primary btn-group">Button A</button>
        </div>
    </div>       
</div>

Answer 2

您需要向css

添加媒体查询

button{
    width: 170px
}
@media (max-width: 540px){
     button{
         width: 100%;
     }
}

为获得最佳效果，请将父类添加到按钮

Answer 3

如果您使用的是Bootstrap，那么您应该可以使用＆＃39; col＆＃39; CSS选择器

您应该可以根据要填充的屏幕大小来应用容器（或行）类，然后应用＆＃39; col-md-4 col-sm-12＆＃39; （取决于你希望它100％的断点）你不应该像上面的例子一样编写CSS内联的所有按钮使用引导类......

链接到引导程序文档http://getbootstrap.com/

Answer 4

请参阅Bootstrap网格系统文档以了解有关不同尺寸的Col设置的更多信息。

http://getbootstrap.com/css/#grid