如何使用 GridView 创建每行动态 table 4 列？

Question

你好我是 c# 和 bootstrap 的新手，我想使用 gridview 像下面的图片一样设置我的 table 样式并使其响应，但我不知道如何实现它。

aspx代码：

<div class="table-responsive"> 
    <asp:GridView runat="Server" id="data" CssClass="table table-hover table-bordered"/>
</div>

css代码：

.table-responsive{
    margin: 20px;
}

但是我的 table 的输出看起来像这样

Answer 1

对 C# 了解不多，但有了 bootstrap，您可以使用类 row 和 col-sm-3、col-md-3、col-lg-3不同的看法。

<div class="table-responsive"> 
    <div class="row">
        <div class="col-sm-3 col-md-3">section1</div>
        <div class="col-sm-3 col-md-3">section2</div>
        <div class="col-sm-3 col-md-3">section3</div>
        <div class="col-sm-3 col-md-3">section4</div>
    </div>
</div>

形成更多帮助http://getbootstrap.com/css/#grid

Answer 2

你无法用 GridView 实现该结构。你真正需要的是 FormView。在 FormView 的 ItemTemplate 中定义一个带有所需标记的 table。

MSDN Url：Using the FormView's Templates

如何使用 GridView 创建每行动态 table 4 列？

How to create dynamic table 4 columns per row using GridView?

css

c#

asp.net

gridview

twitter-bootstrap