Блог

Главная - Вопросы по программированию - внешний стиль.css не работает с bootstrap css

внешний стиль.css не работает с bootstrap css

#html #css

#HTML #css

Вопрос:

Я новичок в HTML и CSS. Есть две кнопки с именами «Нажмите меня» и «сброс», и я пытался добавить границу вокруг них, но результат не обновляется в соответствии с моим файлом style.css.

 .flex-box-container-1 {
   display: flex;
   border: 1px solid black;
   padding: 10px;
}  
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-1">
  <h2>Challenge 1: Your age in Days</h2>
  <div class="flex-box-container-1">
    <div>
      <button class="btn btn-primary">Click me</button>
    </div>
  <div>
  <button class="btn btn-danger">reset</button>
</div>

Ответ №1:

Он работает правильно. Убедитесь, что путь к style.css указан правильно. Или просто добавьте стиль в сам html-файл. Это также уменьшит количество файлов, которые будут извлекаться с сервера.

 <html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
  />
  <style>
    .flex-box-container-1 {
     display: flex;
     border: 1px solid black;
     padding: 10px;
   }
 </style>
 <title>Challenges</title>

</head>
<body>
 <div class="container-1">
  <h2>Challenge 1: Your age in Days</h2>
  <div class="flex-box-container-1">
    <div>
      <button class="btn btn-primary">Click me</button>
    </div>
    <div>
      <button class="btn btn-danger">reset</button>
    </div>
  </div>
</div>
<!-- <script src="static/JS/script.js"></script> -->
</body>
</html>

Ответ №2:

Он работает правильно. Убедитесь, что путь к style.css указан правильно Иногда ваш путь не попадает в соответствующий символ пользователя каталога (@) в начале пути. Или просто добавьте стиль в сам html-файл, как сказал Акшай. Это также уменьшит количество файлов, которые будут извлекаться с сервера.

Ответ №3:

Он работал правильно. проверьте расположение файла.

Если вы добавите больше классов для переопределения bootstrap. То есть добавить стиль к .container-1 .flex-box-container-1 

 .container-1 .flex-box-container-1 {
   display: flex;
   border: 1px solid black;
   padding: 10px;
}

Использование !important не очень хорошая практика, даже когда есть больше способов.

Это работает для меня в локальном файле, который я полностью протестировал.

Working Demo 

 .container-1 .flex-box-container-1 {
   display: flex;
   border: 1px solid black;
   padding: 10px;
}  
 <html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="static/style/style.css" />
<title>Challenges</title>
</head>
<body>
 <div class="container-1">
  <h2>Challenge 1: Your age in Days</h2>
  <div class="flex-box-container-1">
  <div>
    <button class="btn btn-primary">Click me</button>
  </div>
  <div>
    <button class="btn btn-danger">reset</button>
  </div>
</div>
</div>
<script src="static/JS/script.js"></script>
</body>
</html>