0

我正在尝试获得一种特定形式的响应式设计。我正在使用 twitter-bootstrap 及其响应式 css，但无法避免“自动堆叠”功能。

在桌面查看时，我试图实现以下显示：

在此处输入图像描述

同样在移动设备中，我基本上想要相同的布局，但按钮被压扁，而不是堆叠。我的 html（当屏幕变小时会堆叠）如下：

<div class = "row">
    <div class = "span12">
        <select class = "span2">
            <option> </option>
        </select>
        <input type="text" class = "input input-large span10" >
    </div>
</div>

<div class = "row">
    <div class = "span4">
        <button class = "btn btn-block btn-large btn-dial">1</button>
    </div>
    <div class = "span4">
        <button class = "btn btn-block btn-large btn-dial">2</button>
    </div>
    <div class = "span4">
        <button class = "btn btn-block btn-large btn-dial">3</button>
    </div>
</div>
<br>
<div class = "row">
    <div class = "span3">
        <button class = "btn btn-block btn-large btn-dial">A</button>
    </div>
    <div class = "span3">
        <button class = "btn btn-block btn-large btn-dial">B</button>
    </div>
    <div class = "span3">
        <button class = "btn btn-block btn-large btn-dial">C</button>
    </div>
    <div class = "span3">
        <button class = "btn btn-block btn-large btn-dial">D</button>
    </div>
</div>

有没有办法在不破解 css 的情况下实现这一目标？

4

0 回答 0