Я создал свое приложение на Bootstrap 4 и использовал плагины для выбора Bootstrap-Table и Bootstrap-DateTime. Все работало нормально, пока я не решил включить Bootstrap-Select. Затем дисплей сошел с ума. Немного покопавшись, я заметил, что причиной проблемы был bootstrap.min.css (я пока не могу говорить о других файлах). Независимо от того, использую ли я версию (bootstrap-3.3.7), поставляемую с Bootstrap-Select, или оригинал, который я использовал до сих пор, который поставлялся с Bootstrap 4. Ниже вы увидите рендеринг обоих файлов css.
Рендеринг и проблема с css из bootstrap-3.3.7 - Активная вкладка не отображает содержимое, пока не будет нажата; элементы управления находятся за пределами своего холста, а символы меньше: 
Рендеринг и проблема с css из бутстрапа 4. В поле выбора не отображаются параметры, но символы отображаются правильно: 
Наконец вот мой 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">×</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>