Question

我对使用引导网格系统进行格式化有疑问...
从我的代码中，我想设置Bootstrap Grid System

(Mobile – xs ( < 768px )、  Tablet – sm ( 768~991px )、 Desktop – md ( 992~1200px )、Large Desktop - lg ( >= 1200px )) like <div class="col-md-8">

到我的datagrid，

我的引导CSS来自bootstrap.min.css

我尝试在代码中设置代码（col-md-4），但我不知道该怎么放置？

GridView：

<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/css/bootstrap.min.css"></script>

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:Timer ID="Timer1" runat="server" Interval="300000" OnTick="Timer1_Tick">
    </asp:Timer>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False">
        <ContentTemplate>
            <componentart:datagrid id="Grid1"
                cssclass="grid"
                groupingnotificationtext="<center>Document</center>"
                allowtextselection="true"
                enableviewstate="true"
                runningmode="Client"
                showheader="false"
                showfooter="true"
                runat="server"
                width="100%"
                pagesize="4">
                    <Levels>                                            
                      <ComponentArt:GridLevel 
                                ShowTableHeading="false"
                                ShowSelectorCells="false"
                                RowCssClass="row"
                                HoverRowCssClass="row-h"
                                SelectedRowCssClass="row-s"
                                SortImageWidth="12"
                                SortImageHeight="22">  

                        <Columns>     
                              <ComponentArt:GridColumn HeadingText="ID" Align="Center" Width="35" AllowSorting="False" DataCellClientTemplateId="IDTemplate" ContextMenuHotSpotCssClass="col-mnu" ContextMenuHotSpotHoverCssClass="col-mnu-h" ContextMenuHotSpotActiveCssClass="col-mnu-d" />              
                              <ComponentArt:GridColumn DataField="no" HeadingText="NO" Width="60" Align="Center" AllowSorting="True" />  
                              <ComponentArt:GridColumn DataField="class" HeadingText="Class" Width="155" Align="Left" AllowSorting="True" TextWrap="True" />                
                              <ComponentArt:GridColumn DataField="level" HeadingText="Level" Width="35" Align="Center" DataCellClientTemplateId="LevelTemplate" />               
                              <ComponentArt:GridColumn DataField="start" HeadingText="Start" Width="125" Align="Center" TextWrap="true" />                   
                        </Columns>      
                      </ComponentArt:GridLevel>
                    </Levels>                               
                    <ClientTemplates>
                       <ComponentArt:ClientTemplate ID="IDTemplate">
                          <div style="text-align: center;">## DataItem.Index + 1 ##</div>
                       </ComponentArt:ClientTemplate>            

                        </ClientTemplates>                                       
                  </componentart:datagrid>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
        </Triggers>
    </asp:UpdatePanel>
</form>

Answer 1

我不知道componentart:datagrid是什么，但是如果它是从DataGrid派生的自定义控件，则不能向其中添加Bootstrap类，因为它将生成一个表，而不是div的表。

为了使Bootstrap正常工作，您需要生成一个here所示的结构。 GridView或DataGrid不适合此。您需要带有中继器的类似内容。

<div class="container">
    <asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>
            <div class="row">
                <div class="col-md-4">
                    <%# Eval("ID") %>
                </div>
                <div class="col-md-4">
                    <%# Eval("no") %>
                </div>
                <div class="col-md-4">
                    <%# Eval("class") %>
                </div>
                <div class="col-md-4">
                    <%# Eval("level") %>
                </div>
                <div class="col-md-4">
                    <%# Eval("start") %>
                </div>
            </div>
        </ItemTemplate>
    </asp:Repeater>
</div>

如何设置ComponentArt数据网格以添加引导网格系统数据网格？

1 个答案: