Question

我正在寻找解决我的响应式桌面问题的方法。

我有一个表，在960px的内容包装中包含不同列长度的行。

然而，当他们分别为50％或49％以及33.3％的33％时，两个和三个的列不适合相同的宽度。

我已经通过谷歌的建议指南进行了搜索，但到目前为止，我所看到的并没有提供我正在寻找的内容。

是否可以在行中创建一个真正响应的div表，其中包含不同的col长度？

演示代码

<div class="masterTable">
        <div class="row" style="width: 100%;">

            <div class="col3" style="width: 33%">
                <asp:TextBox ID="TB1" runat="server"></asp:TextBox>
            </div>
            <div class="col3" style="width: 33%">
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            </div>
            <div class="col3" style="width: 33%">
                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            </div>
        </div>
        <div class="row" style="width: 100%;">

            <div class="col2" style="width: 50%">
                <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
            </div>
            <div class="col2" style="width: 50%">
                <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
            </div>
        </div>
    </div>
</div>

Answer 1

我想参考Bootstrap。

这是许多开发人员使用的框架，以获得精美的响应式设计。

介绍Gridsystem（参见bootstrap网站上的Css标签）：

Bootstrap包含一个响应式移动第一流体网格系统，随着设备或视口大小的增加，可以适当地扩展到12列。它包括用于简单布局选项的预定义类，以及用于生成更多语义布局的强大混合。

看看这个，你会节省很多时间。

修改

我创建了一个带有简短示例的jsfiddle：http://jsfiddle.net/VDesign/38n0b3v4/

代码：

<div class="masterTable"> <div class="row"> <div class="col-sm-4"> <input id="text1" class="form-control" /> </div> <div class="col-sm-4"> <input id="text2" class="form-control" /> </div> <div class="col-sm-4"> <input id="text3" class="form-control" /> </div> </div> <div class="row"> <div class="col-sm-6"> <input id="text4" class="form-control" /> </div> <div class="col-sm-6"> <input id="text5" class="form-control" /> </div> </div> </div> </div>

响应的Div表斗争多行

1 个答案: