начальная загрузка 4 Дизайн страницы не отображается как исключение

Question

Я создал страницу с помощью начальной загрузки 4. Но она не отображается в соответствии с моим дизайном. Ниже приведен код файлов CSS и JS, которые я использовал. Также поделились исключенным внешним видом и неправильным внешним видом.

<!-- Link CSS  // -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../css/bootstrap-datetimepicker.css">
<link href="../css/bootstrap-select.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="../css/bootstrap-multiselect.css"/>
<link href="../css/bootstrap.css" rel="stylesheet" id="bootstrap-css">

<!-- Link JS   -->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<!--<script src="../js/jquery-3.3.1.js"></script>-->
<script src="../js/bootstrap-datetimepicker.js"></script>
<!--<script src="../js/bootstrap-multiselect.js"></script>-->
<script src="../js/bootstrap.js"></script>
<script src="../js/bootstrap-select.js"></script>
<script src="../js/ajax.js"></script>
<!-- multiselect based on dropbox -->
<script src="https://www.gstatic.com/charts/loader.js"></script>
<!-- Graph Chart  -->
<script src="https://www.jqueryscript.net/demo/Creating-A-Live-Editable-Table-with-jQuery-Tabledit/jquery.tabledit.js"></script>

Ниже исключенного Внешний вид введите описание изображения здесь

Неправильный внешний вид введите описание изображения здесь

Answer 1

Вероятно, это потому, что порядок элементов CSS.

Последняя ссылка, которую вы упоминаете в документе HTML, имеет более высокий приоритет.

Попробуйте сначала загрузить базовый CSS начальной загрузки изатем остальные:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="../css/bootstrap.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="../css/bootstrap-datetimepicker.css">
<link href="../css/bootstrap-select.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="../css/bootstrap-multiselect.css"/>