2

我的 Telerik RadGrid 在正常页面上工作正常，但是当我包含 Bootstrap 的 CSS 时，它开始变得丑陋！我该怎么办？

添加引导程序之前 在此处输入图像描述

添加引导程序后 在此处输入图像描述

普通页面代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication8.WebForm2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>

            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <telerik:RadGrid ID="RadGrid3" runat="server" AllowFilteringByColumn="True" AllowPaging="True" AllowSorting="True" AutoGenerateDeleteColumn="True" AutoGenerateEditColumn="True" CellSpacing="0" DataSourceID="SqlDataSource1" GridLines="None" ShowGroupPanel="True">
                <ClientSettings AllowColumnsReorder="True" AllowDragToGroup="True" ReorderColumnsOnClient="True">
                    <Scrolling AllowScroll="True" UseStaticHeaders="True" />
                </ClientSettings>
                <MasterTableView AutoGenerateColumns="False" DataKeyNames="room_amenities_id" DataSourceID="SqlDataSource1">
                    <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>

                    <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
                        <HeaderStyle Width="30px"></HeaderStyle>
                    </RowIndicatorColumn>

                    <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
                        <HeaderStyle Width="30px"></HeaderStyle>
                    </ExpandCollapseColumn>

                    <Columns>
                        <telerik:GridBoundColumn DataField="room_amenities_id" DataType="System.Int32" FilterControlAltText="Filter room_amenities_id column" HeaderText="room_amenities_id" ReadOnly="True" SortExpression="room_amenities_id" UniqueName="room_amenities_id">
                            <ColumnValidationSettings>
                                <ModelErrorMessage Text="" />
                            </ColumnValidationSettings>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="room_id" DataType="System.Int32" FilterControlAltText="Filter room_id column" HeaderText="room_id" SortExpression="room_id" UniqueName="room_id">
                            <ColumnValidationSettings>
                                <ModelErrorMessage Text="" />
                            </ColumnValidationSettings>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="amenities_id" DataType="System.Int32" FilterControlAltText="Filter amenities_id column" HeaderText="amenities_id" SortExpression="amenities_id" UniqueName="amenities_id">
                            <ColumnValidationSettings>
                                <ModelErrorMessage Text="" />
                            </ColumnValidationSettings>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="cost" DataType="System.Decimal" FilterControlAltText="Filter cost column" HeaderText="cost" SortExpression="cost" UniqueName="cost">
                            <ColumnValidationSettings>
                                <ModelErrorMessage Text="" />
                            </ColumnValidationSettings>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="guest_cost" DataType="System.Decimal" FilterControlAltText="Filter guest_cost column" HeaderText="guest_cost" SortExpression="guest_cost" UniqueName="guest_cost">
                            <ColumnValidationSettings>
                                <ModelErrorMessage Text="" />
                            </ColumnValidationSettings>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="expiry_date" DataType="System.DateTime" FilterControlAltText="Filter expiry_date column" HeaderText="expiry_date" SortExpression="expiry_date" UniqueName="expiry_date">
                            <ColumnValidationSettings>
                                <ModelErrorMessage Text="" />
                            </ColumnValidationSettings>
                        </telerik:GridBoundColumn>
                        <telerik:GridCheckBoxColumn DataField="in_service" DataType="System.Boolean" FilterControlAltText="Filter in_service column" HeaderText="in_service" SortExpression="in_service" UniqueName="in_service">
                        </telerik:GridCheckBoxColumn>
                        <telerik:GridBoundColumn DataField="service_remarks" FilterControlAltText="Filter service_remarks column" HeaderText="service_remarks" SortExpression="service_remarks" UniqueName="service_remarks">
                            <ColumnValidationSettings>
                                <ModelErrorMessage Text="" />
                            </ColumnValidationSettings>
                        </telerik:GridBoundColumn>
                        <telerik:GridCheckBoxColumn DataField="isactive" DataType="System.Boolean" FilterControlAltText="Filter isactive column" HeaderText="isactive" SortExpression="isactive" UniqueName="isactive">
                        </telerik:GridCheckBoxColumn>
                        <telerik:GridBoundColumn DataField="date" DataType="System.DateTime" FilterControlAltText="Filter date column" HeaderText="date" SortExpression="date" UniqueName="date">
                            <ColumnValidationSettings>
                                <ModelErrorMessage Text="" />
                            </ColumnValidationSettings>
                        </telerik:GridBoundColumn>
                    </Columns>

                    <EditFormSettings>
                        <EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
                    </EditFormSettings>

                    <PagerStyle PageSizeControlType="RadComboBox"></PagerStyle>
                </MasterTableView>

                <PagerStyle PageSizeControlType="RadComboBox"></PagerStyle>

                <FilterMenu EnableImageSprites="False"></FilterMenu>
            </telerik:RadGrid>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:xClassHotelConnectionString %>" SelectCommand="SELECT * FROM [CI_Room_Amenities]"></asp:SqlDataSource>
        </div>
    </form>
</body>
</html>

Bootstrap 启用页面又名混乱页面

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication8.WebForm1" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- Latest compiled and minified JavaScript -->
</head>
<body>
    <div>
        <form id="form1" runat="server">
            <div class="container">
                <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
                <telerik:RadGrid ID="RadGrid1" runat="server" AllowFilteringByColumn="True" AllowPaging="True" AllowSorting="True" AutoGenerateDeleteColumn="True" AutoGenerateEditColumn="True" CellSpacing="0" DataSourceID="SqlDataSource1" GridLines="None" ShowGroupPanel="True">
                    <ClientSettings AllowDragToGroup="True">
                        <Scrolling AllowScroll="True" UseStaticHeaders="True" />
                    </ClientSettings>
                    <MasterTableView AutoGenerateColumns="False" DataKeyNames="room_amenities_id" DataSourceID="SqlDataSource1">
                        <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>

                        <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
                            <HeaderStyle Width="20px"></HeaderStyle>
                        </RowIndicatorColumn>

                        <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
                            <HeaderStyle Width="20px"></HeaderStyle>
                        </ExpandCollapseColumn>

                        <Columns>
                            <telerik:GridBoundColumn DataField="room_amenities_id" DataType="System.Int32" FilterControlAltText="Filter room_amenities_id column" HeaderText="room_amenities_id" ReadOnly="True" SortExpression="room_amenities_id" UniqueName="room_amenities_id">
                                <ColumnValidationSettings>
                                    <ModelErrorMessage Text="" />
                                </ColumnValidationSettings>
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="room_id" DataType="System.Int32" FilterControlAltText="Filter room_id column" HeaderText="room_id" SortExpression="room_id" UniqueName="room_id">
                                <ColumnValidationSettings>
                                    <ModelErrorMessage Text="" />
                                </ColumnValidationSettings>
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="amenities_id" DataType="System.Int32" FilterControlAltText="Filter amenities_id column" HeaderText="amenities_id" SortExpression="amenities_id" UniqueName="amenities_id">
                                <ColumnValidationSettings>
                                    <ModelErrorMessage Text="" />
                                </ColumnValidationSettings>
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="cost" DataType="System.Decimal" FilterControlAltText="Filter cost column" HeaderText="cost" SortExpression="cost" UniqueName="cost">
                                <ColumnValidationSettings>
                                    <ModelErrorMessage Text="" />
                                </ColumnValidationSettings>
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="guest_cost" DataType="System.Decimal" FilterControlAltText="Filter guest_cost column" HeaderText="guest_cost" SortExpression="guest_cost" UniqueName="guest_cost">
                                <ColumnValidationSettings>
                                    <ModelErrorMessage Text="" />
                                </ColumnValidationSettings>
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="expiry_date" DataType="System.DateTime" FilterControlAltText="Filter expiry_date column" HeaderText="expiry_date" SortExpression="expiry_date" UniqueName="expiry_date">
                                <ColumnValidationSettings>
                                    <ModelErrorMessage Text="" />
                                </ColumnValidationSettings>
                            </telerik:GridBoundColumn>
                            <telerik:GridCheckBoxColumn DataField="in_service" DataType="System.Boolean" FilterControlAltText="Filter in_service column" HeaderText="in_service" SortExpression="in_service" UniqueName="in_service">
                            </telerik:GridCheckBoxColumn>
                            <telerik:GridBoundColumn DataField="service_remarks" FilterControlAltText="Filter service_remarks column" HeaderText="service_remarks" SortExpression="service_remarks" UniqueName="service_remarks">
                                <ColumnValidationSettings>
                                    <ModelErrorMessage Text="" />
                                </ColumnValidationSettings>
                            </telerik:GridBoundColumn>
                            <telerik:GridCheckBoxColumn DataField="isactive" DataType="System.Boolean" FilterControlAltText="Filter isactive column" HeaderText="isactive" SortExpression="isactive" UniqueName="isactive">
                            </telerik:GridCheckBoxColumn>
                            <telerik:GridBoundColumn DataField="date" DataType="System.DateTime" FilterControlAltText="Filter date column" HeaderText="date" SortExpression="date" UniqueName="date">
                                <ColumnValidationSettings>
                                    <ModelErrorMessage Text="" />
                                </ColumnValidationSettings>
                            </telerik:GridBoundColumn>
                        </Columns>

                        <EditFormSettings>
                            <EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
                        </EditFormSettings>

                        <PagerStyle PageSizeControlType="RadComboBox"></PagerStyle>
                    </MasterTableView>

                    <PagerStyle PageSizeControlType="RadComboBox"></PagerStyle>

                    <FilterMenu EnableImageSprites="False"></FilterMenu>
                </telerik:RadGrid>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConflictDetection="CompareAllValues" ConnectionString="<%$ ConnectionStrings:xClassHotelConnectionString %>" DeleteCommand="DELETE FROM [CI_Room_Amenities] WHERE [room_amenities_id] = @original_room_amenities_id AND [room_id] = @original_room_id AND [amenities_id] = @original_amenities_id AND (([cost] = @original_cost) OR ([cost] IS NULL AND @original_cost IS NULL)) AND (([guest_cost] = @original_guest_cost) OR ([guest_cost] IS NULL AND @original_guest_cost IS NULL)) AND (([expiry_date] = @original_expiry_date) OR ([expiry_date] IS NULL AND @original_expiry_date IS NULL)) AND (([in_service] = @original_in_service) OR ([in_service] IS NULL AND @original_in_service IS NULL)) AND (([service_remarks] = @original_service_remarks) OR ([service_remarks] IS NULL AND @original_service_remarks IS NULL)) AND (([isactive] = @original_isactive) OR ([isactive] IS NULL AND @original_isactive IS NULL)) AND (([date] = @original_date) OR ([date] IS NULL AND @original_date IS NULL))" InsertCommand="INSERT INTO [CI_Room_Amenities] ([room_id], [amenities_id], [cost], [guest_cost], [expiry_date], [in_service], [service_remarks], [isactive], [date]) VALUES (@room_id, @amenities_id, @cost, @guest_cost, @expiry_date, @in_service, @service_remarks, @isactive, @date)" OldValuesParameterFormatString="original_{0}" SelectCommand="SELECT * FROM [CI_Room_Amenities]" UpdateCommand="UPDATE [CI_Room_Amenities] SET [room_id] = @room_id, [amenities_id] = @amenities_id, [cost] = @cost, [guest_cost] = @guest_cost, [expiry_date] = @expiry_date, [in_service] = @in_service, [service_remarks] = @service_remarks, [isactive] = @isactive, [date] = @date WHERE [room_amenities_id] = @original_room_amenities_id AND [room_id] = @original_room_id AND [amenities_id] = @original_amenities_id AND (([cost] = @original_cost) OR ([cost] IS NULL AND @original_cost IS NULL)) AND (([guest_cost] = @original_guest_cost) OR ([guest_cost] IS NULL AND @original_guest_cost IS NULL)) AND (([expiry_date] = @original_expiry_date) OR ([expiry_date] IS NULL AND @original_expiry_date IS NULL)) AND (([in_service] = @original_in_service) OR ([in_service] IS NULL AND @original_in_service IS NULL)) AND (([service_remarks] = @original_service_remarks) OR ([service_remarks] IS NULL AND @original_service_remarks IS NULL)) AND (([isactive] = @original_isactive) OR ([isactive] IS NULL AND @original_isactive IS NULL)) AND (([date] = @original_date) OR ([date] IS NULL AND @original_date IS NULL))">
                    <DeleteParameters>
                        <asp:Parameter Name="original_room_amenities_id" Type="Int32" />
                        <asp:Parameter Name="original_room_id" Type="Int32" />
                        <asp:Parameter Name="original_amenities_id" Type="Int32" />
                        <asp:Parameter Name="original_cost" Type="Decimal" />
                        <asp:Parameter Name="original_guest_cost" Type="Decimal" />
                        <asp:Parameter Name="original_expiry_date" Type="DateTime" />
                        <asp:Parameter Name="original_in_service" Type="Boolean" />
                        <asp:Parameter Name="original_service_remarks" Type="String" />
                        <asp:Parameter Name="original_isactive" Type="Boolean" />
                        <asp:Parameter Name="original_date" Type="DateTime" />
                    </DeleteParameters>
                    <InsertParameters>
                        <asp:Parameter Name="room_id" Type="Int32" />
                        <asp:Parameter Name="amenities_id" Type="Int32" />
                        <asp:Parameter Name="cost" Type="Decimal" />
                        <asp:Parameter Name="guest_cost" Type="Decimal" />
                        <asp:Parameter Name="expiry_date" Type="DateTime" />
                        <asp:Parameter Name="in_service" Type="Boolean" />
                        <asp:Parameter Name="service_remarks" Type="String" />
                        <asp:Parameter Name="isactive" Type="Boolean" />
                        <asp:Parameter Name="date" Type="DateTime" />
                    </InsertParameters>
                    <UpdateParameters>
                        <asp:Parameter Name="room_id" Type="Int32" />
                        <asp:Parameter Name="amenities_id" Type="Int32" />
                        <asp:Parameter Name="cost" Type="Decimal" />
                        <asp:Parameter Name="guest_cost" Type="Decimal" />
                        <asp:Parameter Name="expiry_date" Type="DateTime" />
                        <asp:Parameter Name="in_service" Type="Boolean" />
                        <asp:Parameter Name="service_remarks" Type="String" />
                        <asp:Parameter Name="isactive" Type="Boolean" />
                        <asp:Parameter Name="date" Type="DateTime" />
                        <asp:Parameter Name="original_room_amenities_id" Type="Int32" />
                        <asp:Parameter Name="original_room_id" Type="Int32" />
                        <asp:Parameter Name="original_amenities_id" Type="Int32" />
                        <asp:Parameter Name="original_cost" Type="Decimal" />
                        <asp:Parameter Name="original_guest_cost" Type="Decimal" />
                        <asp:Parameter Name="original_expiry_date" Type="DateTime" />
                        <asp:Parameter Name="original_in_service" Type="Boolean" />
                        <asp:Parameter Name="original_service_remarks" Type="String" />
                        <asp:Parameter Name="original_isactive" Type="Boolean" />
                        <asp:Parameter Name="original_date" Type="DateTime" />
                    </UpdateParameters>
                </asp:SqlDataSource>
            </div>
        </form>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

问题是什么？我该如何解决这个问题？

4

2 回答 2

3

我解决此问题的方法是使用 Chrome、IE 或 Firefox 中的开发人员工具查找设置，然后在引导后加载的特定于站点的 css 文件中应用适当的 css 标记。

例如，我必须应用此修复程序以使用 Bootstrap 3 更正带有复选框的 RadComboBox

/* ----- RadComboBox Bootstrap Fix ----- */
.RadComboBox {
    border: none;
}

.RadComboBoxDropDown .rcbCheckBox {
    margin-top: -3px;
    margin-bottom: 0;
    margin-right: 5px;
}

另一种选择是为您的网格创建自定义皮肤 css，并在引导程序的 css 文件之后加载它们的 css。

如果您需要开始为 Telerik 控件创建皮肤，请参阅此处的信息：http: //demos.telerik.com/aspnet-ajax/grid/examples/styles/custom-skin/defaultcs.aspx

请特别注意 Input.MyCustomSkin.css，因为它可以帮助您将输入框的大小设置回您想要的大小。

于 2013-11-14T15:29:06.153 回答
0

我刚刚从Bootstrap 自定义页面中删除了Common CSS部分的表格，然后我的 Telerik RadGrid 比正常命令栏大得到修复。

http://getbootstrap.com/customize

于 2015-12-30T07:40:34.307 回答