Question

我已经在Bootstrap 4上构建了我的应用程序，并且使用了Bootstrap-Table和Bootstrap-DateTime选择器插件。一切正常，直到我决定包括Bootstrap-Select。然后显示疯了。通过深入研究，我注意到bootstrap.min.css引起了问题（我无法说其他文件）。我使用的是Bootstrap-Select提供的版本（bootstrap-3.3.7），还是到目前为止我一直使用的Bootstrap 4附带的原始版本。在下面，您将看到两个CSS文件的呈现。

从bootstrap-3.3.7渲染并出现CSS问题-“活动”选项卡在单击之前不会显示内容；控件已超出其画布且字符较小：

渲染和引导4中的CSS问题-“选择”框不显示选项，但字符渲染正确：

最后这是我的html文件：

         //**** NE FONCTIONNE PAS SI MIS DANS LE SECTION $(document).ready(function () {} ****
        $('#table').bootstrapTable({
            url: 'GetListeDemandeurs',
            locale: 'fr-CA',
            pagination: true,
            paginationLoop: true,
            search: true,
            clickToSelect: true,
            singleSelect: true,
            sortable: true,
            sortOrder: 'asc',
            idField: 'Code_Demandeur',
            sortName: 'Code_Demandeur',
        });
        var $table = $('#table');
        //**** FIN SECTION NON FONCTIONNELLE ****

        //**** Instance de la Bootstrap-DateTime picker ****
        $('.form_date').datetimepicker({
            language: 'fr',
            weekStart: 1,
            todayBtn: 1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0
        });
        //**** FIN Bootstrap-DateTime picker ****

        $(document).ready(function () {

            var enregChoisi = null;
            $(function () {
                //**** Action click de la ligne ****
                $table.on('click-row.bs.table', function (e, row, $element) {   //**** SECTION MISE EN COMMENTAIRE: BOUTON NE FONCTIONNE PAS ****
                    $('.success').removeClass('success');
                    $($element).addClass('success');

                    //**** On encapsule la ligne choisie ****
                    var index = $table.find('tr.success').data('index');
                    enregChoisi = $table.bootstrapTable('getData')[index];

                    //**** Active les boutons modifier et supprimer a la selection d'une ligne ****
                    document.getElementById('btnModif').disabled = false;
                    document.getElementById('btnSupp').disabled = false;
                });
            });




        });

<!DOCTYPE html>
<html>
<head>
    @{
        ViewBag.Title = "Demandeurs (Liste des)";
    }
    <title></title>


    
    @* ========================================= *@
    


    @* **** Required meta tags **** *@
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    @* **** END required meta tags **** *@

    <script src="~/Scripts/jquery-3.3.1.min.js"></script> @**** Version de JQUERY **** *@

    @* **** Bootstrap-Select **** *@
    <script src="~/Scripts/umd/popper.min.js"></script>
    @*<script src="~/Scripts/jquery-3.3.1.min.js"></script>*@
    <script src="~/Scripts/bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <link href="~/Scripts/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="~/Content/bootstrap-select.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="~/Scripts/bootstrap-select.min.js"></script>
    <!-- (Optional) Latest compiled and minified JavaScript translation files -->
    <script src="~/Scripts/i18n/defaults-fr_FR.min.js"></script>
    @* **** FIN **** *@





    @* **** Bootstrap, Bootstrap-Table **** *@
    @* **** MIS EN COMMENTAIRE CAR CRÉE UN AFFICHAGE TRÈS PETIT DES COOLES BOOTSTRAPS
        <link rel="stylesheet" href="~/Content/bootstrap.css"> **** *@
    <link href="~/Content/bootstrap-table.css" rel="stylesheet" />
    <script src="~/Scripts/bootstrap-table/bootstrap-table.js"></script>
    <script src="~/Scripts/bootstrap-table/locale/bootstrap-table-fr-FR.min.js"></script>
    @* **** FIN référence **** *@

    @* **** Bootstrap-DateTime picker **** *@
    <link href="~/Content/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
    @* **** FIN référence **** *@

    @* **** Font-Awesome **** *@
    <link href="~/css/font-awesome.min.css" rel="stylesheet">
    @* **** FIN référence **** *@

    @* *************** DivTable.com ou astérisque aux champs obligatoires ***************** *@
    <link rel="stylesheet" href="~/Content/css/css_custom/DivTable.css" />
    @* *************** Fin DivTable.com ***************** *@

    @* *************** Fonctions communes  ***************** *@
    <script src="~/Scripts/CustomJS/Fonctions_Communes.js"></script>
    @* *************** Fin ***************** *@


</head>
<body>
    @* ====================== SECTION COLONNE DU BOOTSTRAP-TABLE ====================== *@
    <div class="container" id="divGrille" style="border:1px solid #cecece; background-color: Snow">
        <table id="table">
            <thead>
                <tr>
                    <th data-field="state" data-radio="true" data-sortable="false" data-searchable="false" data-formatter="stateFormatter"></th>
                    <th data-field="Code_Demandeur" data-sortable="true" data-searchable="true">Code<i class="fa fa-fw fa-sort"></i></th>
                    <th data-field="Nom_Demandeur" data-sortable="true" data-searchable="true">Nom<i class="fa fa-fw fa-sort"></i></th>
                    <th data-field="Prenoms_Demandeur" data-sortable="true" data-searchable="true">Prénoms<i class="fa fa-fw fa-sort"></i></th>
                    <th data-field="Date_Naissance_Demandeur" data-sortable="true" data-searchable="true" data-align="right" data-formatter="dateFormat">
                        Date de naissance<i class="fa fa-fw fa-sort"></i>
                    </th>
                    <th data-field="Nom_Sexe" data-sortable="true" data-searchable="true">Sexe<i class="fa fa-fw fa-sort"></i></th>
                    <th data-field="Adresse_Demandeur" data-sortable="true" data-searchable="true">Adresse<i class="fa fa-fw fa-sort"></i></th>
                    <th data-field="Nom_Ville" data-sortable="true" data-searchable="true">Ville<i class="fa fa-fw fa-sort"></i></th>
                    <th data-field="Nom_Province" data-sortable="true" data-searchable="true">Province<i class="fa fa-fw fa-sort"></i></th>
                    <th data-field="CodePostal_Demandeur" data-sortable="true" data-searchable="true">CP<i class="fa fa-fw fa-sort"></i></th>
                    <th data-field="Tel1_Demandeur" data-sortable="true" data-searchable="true">Téléphone 1<i class="fa fa-fw fa-sort"></i></th>
                    <th data-field="Tel2_Demandeur" data-sortable="true" data-searchable="true">Téléphone 2<i class="fa fa-fw fa-sort"></i></th>
                    <th data-field="Tel3_Demandeur" data-sortable="true" data-searchable="true">Fax<i class="fa fa-fw fa-sort"></i></th>
                    <th data-field="Courriel1_Demandeur" data-sortable="true" data-searchable="true">Courriel 1<i class="fa fa-fw fa-sort"></i></th>
                    <th data-field="Courriel2_Demandeur" data-sortable="true" data-searchable="true">Courriel 2<i class="fa fa-fw fa-sort"></i></th>
                    <th data-field="Courriel3_Demandeur" data-sortable="true" data-searchable="true">Courriel 3<i class="fa fa-fw fa-sort"></i></th>
                    <th data-field="Nom_SituationMatrimoniale" data-sortable="true" data-searchable="true">Situation matrimoniale<i class="fa fa-fw fa-sort"></i></th>
                    <th data-field="Date_Ouverture_Dossier" data-sortable="true" data-searchable="true" data-align="right" data-formatter="dateFormat">
                        Date d'ouverture du dossier<i class="fa fa-fw fa-sort"></i>
                    </th>
                    <th data-field="Date_Cloture_Dossier" data-sortable="true" data-searchable="true" data-align="right" data-formatter="dateFormat">
                        Date de cloture du dossier<i class="fa fa-fw fa-sort"></i>
                    </th>
                    <th data-field="Nom_TrancheRevenu" data-sortable="true" data-searchable="true">Tranche de revenu<i class="fa fa-fw fa-sort"></i></th>
                    <th data-field="Nom_Occupation" data-sortable="true" data-searchable="true">Occupation<i class="fa fa-fw fa-sort"></i></th>
                    <th data-field="Nom_StatutLegal" data-sortable="true" data-searchable="true">Statut légall<i class="fa fa-fw fa-sort"></i></th>
                    <th data-field="Nom_Scolarite" data-sortable="true" data-searchable="true">Scolarité<i class="fa fa-fw fa-sort"></i></th>
                    <th data-field="Nom_Communaute" data-sortable="true" data-searchable="true">Communauté<i class="fa fa-fw fa-sort"></i></th>
                    <th data-field="Nom_SourceInformation" data-sortable="true" data-searchable="true">Source d'information<i class="fa fa-fw fa-sort"></i></th>
                    <th data-field="Cons" data-sortable="true" data-searchable="true">Conseiller<i class="fa fa-fw fa-sort"></i></th>
                    <th data-field="Handicape" data-sortable="false" data-searchable="false" data-align="center" data-formatter="ticksFormatter">
                        Handicapé?<i class="fa fa-fw fa-sort"></i>
                    </th>
                    <th data-field="Reference" data-sortable="true" data-searchable="true">Référence<i class="fa fa-fw fa-sort"></i></th>
                    <th data-field="Remarques_Demandeur" data-sortable="false" data-searchable="true">Remarques<i class="fa fa-fw fa-sort"></i></th>
                    <th data-field="Actif_Inactif" data-sortable="false" data-searchable="false" data-align="center" data-formatter="ticksFormatter">Actif / Inactif</th>
                    <th data-field="Dte_Saisie" data-sortable="true" data-searchable="false" data-align="right" data-formatter="dateFormat">Date de saisie <i class="fa fa-fw fa-sort"></i></th>
                    <th data-field="UserName" data-sortable="false" data-searchable="false">Utilisateur</th>
                </tr>
            </thead>
        </table>
    </div>

    @* ====================== SECTION MODALE ====================== *@
    <div class="bs-example" style="margin-top: 10px">
        <!-- **** Boutons pour lancer le Modal **** -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#fenModAdm_Demandeurs" data-title="Ajouter">Ajouter</button>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#fenModAdm_Demandeurs" data-title="Modifier" id="btnModif" disabled>Modifier</button>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#fenModAdm_Demandeurs" data-title="Supprimer" id="btnSupp" disabled>Supprimer</button>

        <!-- Modal HTML -->
        <div id="fenModAdm_Demandeurs" class="modal fade" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">Modal Window</h4>
                    </div>
                    <div class="modal-body">
                        <form role="form" id="form_Demandeurs">
                            <table style="width:100%">
                                <tr>
                                    <td>
                                        <div class="form-group">
                                            <label for="txt_Code_Demandeur" class="control-label">Code:</label>
                                            <input type="text" class="form-control" id="txt_Code_Demandeur" placeholder="Code" />
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group required-field">
                                            <label for="txt_Nom_Demandeur" class="control-label">Nom:</label>
                                            <input type="text" class="form-control" id="txt_Nom_Demandeur" placeholder="Nom" onblur="TrimAndReplaceDoubleSpace(this)" autofocus />
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group required-field">
                                            <label for="txt_Prenoms_Demandeur" class="control-label">Prénoms:</label>
                                            <input type="text" class="form-control" id="txt_Prenoms_Demandeur" placeholder="Prénoms" onblur="TrimAndReplaceDoubleSpace(this)" />
                                        </div>
                                    </td>
                                </tr>
                            </table>

                            @* *************** Onglets à l'intérieur du modal ****************** *@

                            <ul class="nav nav-tabs" id="myTab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="contacts-tab" data-toggle="tab" href="#ongletContacts_Ddeurs"
                                       role="tab" aria-controls="ongletContacts_Ddeurs" aria-selected="true">Contacts</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="EtatCivil-tab" data-toggle="tab" href="#ongletEtatCivil_Ddeurs"
                                       role="tab" aria-controls="ongletEtatCivil_Ddeurs" aria-selected="false">État civil</a>
                                </li>
                            </ul>
                            <div class="tab-content" id="myTabContent">
                                @* ******** Onglet 1 "Contact": adresse géographique, courriel, téléphone... ***************** *@
                                <div class="tab-pane fade show active" id="ongletContacts_Ddeurs" role="tabpanel" aria-labelledby="contacts-tab">
                                    <div style="border: solid 1px yellow; margin-top: 5px; padding: 5px 2px 10px 2px; ">
                                        <table style="width:100%">
                                            <tr>
                                                <td colspan="3">
                                                    <div class="form-group">
                                                        <label for="txt_Adresse_Demandeur" class="control-label">Adresse:</label>
                                                        <input type="text" class="form-control" id="txt_Adresse_Demandeur" placeholder="Numéro, Rue"
                                                               onblur="TrimAndReplaceDoubleSpace(this)" />
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="form-group">
                                                        <label for="cbx_Ville" class="control-label">Ville:</label>
                                                        <input type="text" class="form-control" id="cbx_Ville" placeholder="Ville" />
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="form-group">
                                                        <label for="cbx_Province" class="control-label">Province:</label>
                                                        <input type="text" class="form-control" id="cbx_Province" placeholder="Province" />
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="form-group">
                                                        <label for="txt_CodePostal_Demandeur" class="control-label">CodePostal:</label>
                                                        <input type="text" class="form-control" id="txt_CodePostal_Demandeur" placeholder="Code Postal"
                                                               style="text-transform: uppercase" maxlength="7" onblur="TrimAndReplaceDoubleSpace(this)" />
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                                @* **** Onglet 2 "état civil": Sexe, Date de naissance, Langue maternelle... *@
                                <div class="tab-pane fade" id="ongletEtatCivil_Ddeurs" role="tabpanel" aria-labelledby="EtatCivil-tab">
                                    <div style="border: solid 1px blue; margin-top: 5px; padding: 5px 2px 10px 2px; ">
                                        <table style="width:100%">
                                            <tr>
                                                <td>
                                                    <div class="form-group required-field">
                                                        <label for="dte_Date_Naissance_Demandeur" class="control-label">Date de Naissance:</label>
                                                        @* **** Bootstrap-DateTime picker **** *@
                                                        <div class="input-group date form_date" data-date="" data-date-format="dd MM yyyy"
                                                             data-link-field="dte_Date_Naissance_Demandeur_Hidden" data-link-format="yyyy-mm-dd">
                                                            <input class="form-control" id="dte_Date_Naissance_Demandeur" size="16" type="text" value="" style="text-align:right;" readonly>
                                                            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                                                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                                            <input type="hidden" id="dte_Date_Naissance_Demandeur_Hidden" value="" /><br />
                                                        </div>
                                                        @* **** FIN Bootstrap-DateTime picker **** *@
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="form-group">
                                                        <label for="cbx_Sexe" class="control-label">Sexe:</label>
                                                        <select class="selectpicker" id="cbx_Sexe">
                                                            <option>Mustard</option>
                                                            <option>Ketchup</option>
                                                            <option>Relish</option>
                                                        </select>

                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="form-group">
                                                        <label for="cbx_SituationMatrimoniale" class="control-label">Situation Matrimoniale:</label>
                                                        <input type="text" class="form-control" id="cbx_SituationMatrimoniale" placeholder="Situation Matrimoniale" />
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                                ...
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" id="btnAnnuler">Annuler</button>
                        <button type="button" class="btn btn-primary" id="btnSauver" value="Sauvegarder"
                                onclick="CreateUpdateDelete_MenuAdmin(document.getElementById('form_Demandeurs'),
                                         document.getElementById('btnSauver'))"></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </body>
</html>

Answer 1

我设法使整个事情正常进行。

下面是我的HTML头的样子：

 <script src="~/Scripts/jquery-3.3.1.min.js"></script> @**** Version de JQUERY utilisée **** *@

    @* **** Référence Font-Awesome **** *@
    <link href="~/css/font-awesome.min.css" rel="stylesheet">
    @* **** FIN référence **** *@

    @* **** Référence Bootstrap-Select menus déroulants CSS / js **** *@
    <script src="~/Scripts/umd/popper.min.js"></script>
    <script src="~/Scripts/bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <link href="~/Scripts/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="~/Content/bootstrap-select.min.css">
    <script src="~/Scripts/bootstrap-select.min.js"></script>
    <script src="~/Scripts/i18n/defaults-fr_FR.min.js"></script>
    @* **** FIN référence **** *@

    @* **** Référence Bootstrap, Bootstrap-Table CSS / js **** *@
    <link href="~/Content/bootstrap-table.css" rel="stylesheet" />
    <script src="~/Scripts/bootstrap-table/bootstrap-table.js"></script>
    <script src="~/Scripts/bootstrap-table/locale/bootstrap-table-fr-FR.min.js"></script>
    @* **** FIN référence **** *@

    @* **** Référence Bootstrap, Bootstrap-DateTime picker CSS / js **** *@
    <script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker/bootstrap-datetimepicker.js" charset="UTF-8"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>
    <link href="~/Content/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
    @* **** FIN référence **** *@

我体内已经删除了一些标签，并准备继续。

Bootstrap 3.3.7与Bootstrap 4

1 个答案: