Bootstrap网格布局不适用于四个gridview表C#

Question

我正在使用 bootrstrap 试图让网格系统正常工作。前四个 div 占据了 12 列中的 6 列，效果很好。我遇到的问题是我希望接下来的四个 div（seventhdiv、eigthdiv、ninethdiv 和 tenthdiv）占据六列，但是我想确保每个 div 内的网格视图是连接在一起的，所以左右两边没有填充。我希望将所有网格视图组合在一起并占据页面的其余部分（该行的 12 列中剩下 6 列）。目前，如果我在每个 div 上设置 col-sm-0 类，它们会组合在一起，但它们不会占据整个宽度。如果我设置 col-sm-2 它们在两端都用填充隔开。 如何使用 bootrstrap 网格布局正确格式化？

    <div class="row">
   <div id="thirddiv" class="col-sm-0">
   </div>
   <div id="fourthdiv" class="col-sm-2">
      <div id="dvTable" style="width: 100%; height: 500px;"></div>
   </div>
   <div id="fifthdiv" class="col-sm-2">
      <div id="dvTable2" style="width: 100%; height: 500px;"></div>
   </div>
   <div id="sixthdiv" class="col-sm-2">
      <div id="dvTable3" style="width: 100%; height: 500px;"></div>
   </div>

   //ISSUE HERE ONWARDS
   <div id="seventhdiv" style="padding-left:15px" class="col-sm-0">
      <asp:GridView ID="GV1" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" AutoGenerateColumns="false" >
         <Columns>
            <asp:boundfield datafield="column_name" ItemStyle-Font-Bold="true"   />
            <asp:boundfield datafield="column_value" />
         </Columns>
         <AlternatingRowStyle BackColor="White"></AlternatingRowStyle>
         <EditRowStyle BackColor="#2461BF"></EditRowStyle>
         <FooterStyle BackColor="#1C1E37" Font-Bold="True" ForeColor="White"></FooterStyle>
         <HeaderStyle BackColor="#1C1E37" Font-Bold="True" ForeColor="White" ></HeaderStyle>
         <PagerStyle HorizontalAlign="Center" BackColor="#2461BF" ForeColor="White"></PagerStyle>
         <RowStyle BackColor="#EFF3FB"></RowStyle>
         <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333"></SelectedRowStyle>
         <SortedAscendingCellStyle BackColor="#F5F7FB"></SortedAscendingCellStyle>
         <SortedAscendingHeaderStyle BackColor="#6D95E1"></SortedAscendingHeaderStyle>
         <SortedDescendingCellStyle BackColor="#E9EBEF"></SortedDescendingCellStyle>
         <SortedDescendingHeaderStyle BackColor="#4870BE"></SortedDescendingHeaderStyle>
      </asp:GridView>
   </div>
   <div id="eigthdiv" class="col-sm-0">
      <asp:GridView ID="GV2" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" AutoGenerateColumns="false" class="dt-responsive display compact">
         <Columns>
            <asp:boundfield datafield="column_name" ItemStyle-Font-Bold="true"  />
            <asp:boundfield datafield="column_value"/>
         </Columns>
         <AlternatingRowStyle BackColor="White"></AlternatingRowStyle>
         <EditRowStyle BackColor="#2461BF"></EditRowStyle>
         <FooterStyle BackColor="#1C1E37" Font-Bold="True" ForeColor="White"></FooterStyle>
         <HeaderStyle BackColor="#1C1E37" Font-Bold="True" ForeColor="White"></HeaderStyle>
         <PagerStyle HorizontalAlign="Center" BackColor="#2461BF" ForeColor="White"></PagerStyle>
         <RowStyle BackColor="#EFF3FB"></RowStyle>
         <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333"></SelectedRowStyle>
         <SortedAscendingCellStyle BackColor="#F5F7FB"></SortedAscendingCellStyle>
         <SortedAscendingHeaderStyle BackColor="#6D95E1"></SortedAscendingHeaderStyle>
         <SortedDescendingCellStyle BackColor="#E9EBEF"></SortedDescendingCellStyle>
         <SortedDescendingHeaderStyle BackColor="#4870BE"></SortedDescendingHeaderStyle>
      </asp:GridView>
   </div>
   <div id="ninethdiv" class="col-sm-0">
      <asp:GridView ID="GV3" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" AutoGenerateColumns="false" class="dt-responsive display compact">
         <Columns>
            <asp:boundfield datafield="column_name" ItemStyle-Font-Bold="true"  />
            <asp:boundfield datafield="column_value"/>
         </Columns>
         <AlternatingRowStyle BackColor="White"></AlternatingRowStyle>
         <EditRowStyle BackColor="#2461BF"></EditRowStyle>
         <FooterStyle BackColor="#1C1E37" Font-Bold="True" ForeColor="White"></FooterStyle>
         <HeaderStyle BackColor="#1C1E37" Font-Bold="True" ForeColor="White"></HeaderStyle>
         <PagerStyle HorizontalAlign="Center" BackColor="#2461BF" ForeColor="White"></PagerStyle>
         <RowStyle BackColor="#EFF3FB"></RowStyle>
         <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333"></SelectedRowStyle>
         <SortedAscendingCellStyle BackColor="#F5F7FB"></SortedAscendingCellStyle>
         <SortedAscendingHeaderStyle BackColor="#6D95E1"></SortedAscendingHeaderStyle>
         <SortedDescendingCellStyle BackColor="#E9EBEF"></SortedDescendingCellStyle>
         <SortedDescendingHeaderStyle BackColor="#4870BE"></SortedDescendingHeaderStyle>
      </asp:GridView>
   </div>
   <div id="tenthdiv" class="col-sm-0">
      <asp:GridView ID="GV4" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" AutoGenerateColumns="false" class="dt-responsive display compact">
         <Columns>
            <asp:boundfield datafield="column_name" ItemStyle-Font-Bold="true"  />
            <asp:boundfield datafield="column_value"/>
         </Columns>
         <AlternatingRowStyle BackColor="White"></AlternatingRowStyle>
         <EditRowStyle BackColor="#2461BF"></EditRowStyle>
         <FooterStyle BackColor="#1C1E37" Font-Bold="True" ForeColor="White"></FooterStyle>
         <HeaderStyle BackColor="#1C1E37" Font-Bold="True" ForeColor="White"></HeaderStyle>
         <PagerStyle HorizontalAlign="Center" BackColor="#2461BF" ForeColor="White"></PagerStyle>
         <RowStyle BackColor="#EFF3FB"></RowStyle>
         <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333"></SelectedRowStyle>
         <SortedAscendingCellStyle BackColor="#F5F7FB"></SortedAscendingCellStyle>
         <SortedAscendingHeaderStyle BackColor="#6D95E1"></SortedAscendingHeaderStyle>
         <SortedDescendingCellStyle BackColor="#E9EBEF"></SortedDescendingCellStyle>
         <SortedDescendingHeaderStyle BackColor="#4870BE"></SortedDescendingHeaderStyle>
      </asp:GridView>
   </div>
</div>

Answer 1

您可以使用nesting 功能以及no-gutters 类（在Bootstap 4 中引入）来实现此目的。

<div class="row">
    <div class="col-1">1st</div>
    <div class="col-1">2nd</div>
    <div class="col-1">3rd</div>
    <div class="col-1">4th</div>
    <div class="col-1">5th</div>
    <div class="col-1">6th</div>
    <div class="col-6">
        <div class="row no-gutters">
            <div class="col-3">7th</div>
            <div class="col-3">8th</div>
            <div class="col-3">9th</div>
            <div class="col-3">10th</div>
        </div>
    </div>
</div>