Question

我是Bootstrap的菜鸟，尽管它非常酷且乐于助人！我有一个问题。

我正试图在宽屏幕上制作一些像这样的按钮：

Button 1    Button 3
Button 2    Button 4

但这是在一个小屏幕上：

Button 1
Button 2
Button 3
Button 4

是否有可能像那样堆叠它们？

Answer 1

试试这个..

<div class="container">
   <div class="col-xs-2">
      <div class="row">
            <div class="col-sm-6">
                <button type="button" class="btn btn-default">Button</button>
            </div>
            <div class="col-sm-6">  
                <button type="button" class="btn btn-default">Button</button>
            </div>
            <div class="col-sm-6">  
                <button type="button" class="btn btn-default">Button</button>
            </div>
            <div class="col-sm-6">  
                <button type="button" class="btn btn-default">Button</button>
            </div>
      </div>
   </div>
</div>

http://bootply.com/106650

修改..

要更改堆栈顺序，您需要像这样嵌套col ..

<div class="container"> <div class="col-xs-3"> <div class="col-md-6"> <button type="button" class="btn btn-default">Button 1</button> <button type="button" class="btn btn-default">Button 2</button> </div> <div class="col-md-6"> <button type="button" class="btn btn-default">Button 3</button> <button type="button" class="btn btn-default">Button 4</button> </div> </div> </div>

我更新了演示：http://bootply.com/106650

Answer 2

这是帮助您实现目标的基础。您可能需要根据您的特定屏幕尺寸进行一些调整。您还可以在http://getbootstrap.com/css/#grid-responsive-resets

找到更多详细信息

<div class="container">
    <div class="row">
        <div class="col-xs-3">
            <button type="button" class="btn btn-default">Button</button>
            <button type="button" class="btn btn-default">Button</button>
            <button type="button" class="btn btn-default">Button</button>
            <button type="button" class="btn btn-default">Button</button>
        </div>
    </div>
</div>

<强>更新

<div class="container">
    <div class="row">
        <div class="col-xs-3">
            <div class="col-md-6">
                <button type="button" class="btn btn-default">Button 1</button>
                <button type="button" class="btn btn-default">Button 2</button>
            </div>
            <div class="col-md-6">
                <button type="button" class="btn btn-default">Button 3</button>
                <button type="button" class="btn btn-default">Button 4</button>
            </div>
        </div>
    </div>
</div>

如何以不同方式堆叠Bootstrap列？

2 个答案: