Bootrstrap网格布局在四个网格视图表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

您可以使用嵌套功能来实现这一点，同时使用无排水沟类(在in-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>