Моя ссылка Bootstrap CSS не работает для меня?

У меня проблема со ссылкой Bootstrap, которая обычно ведет в файл HTML:

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous">

Это делает мою навигацию похожей на:

(Мне нужно как минимум 10 репутации, чтобы публиковать изображения, поэтому я должен опубликовать прямую ссылку) https://i.imgur.com/dANnzzG.png

и после того, как я удалю ссылку:

(Мне нужно как минимум 10 репутации, чтобы публиковать изображения, поэтому я должен опубликовать прямую ссылку) https://i.imgur.com/EpnZCeK.png

Но, как вы можете видеть на картинке 2, если у меня нет ссылки, элементы внизу панели навигации больше не находятся в правильном положении. Пожалуйста помоги.

Обновлено:

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous">
<div class = "row">
  <div class = "col-6">
      <app-list-employees></app-list-employees>
</div>
  <div class = "col-6">
     <div><app-book-employee></app-book-employee></div>
     <p></p>
    <div><app-calendar-books></app-calendar-books></div>
  </div>
</div>

Это код компонента.

вот как импортировать boostrap в angular: stackoverflow.com/questions/50559810/…

לבני מלכה 27.05.2019 09:46
maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.cs​s попробуйте это
stefo91 27.05.2019 10:41

Похоже, что бутстрап работает нормально, когда вы не используете ссылку, стиль, примененный к панели навигации на втором изображении, взят из бутстрапа. предоставьте больше HTML, чтобы мы могли найти проблему. Вы можете использовать stackblitz.com для создания примера

Napinator 27.05.2019 11:03
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
3
632
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

В корне вашего проекта находится файл angular.json. Если вы хотите использовать CDN для начальной загрузки (как вы используете сейчас), найдите объект стилей в этом файле (возможно, между строками 25 и 35), туда вы можете добавить свою ссылку. это должно выглядеть так:

 "projects": {
      "architect": {
        "build": {
          "styles": [
            "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          ]
        }
      }
    }

Какая у вас ошибка? Можете ли вы предоставить больше кода, чтобы я мог посмотреть?

Napinator 27.05.2019 10:25

Я получаю такие же стили, как на картинке. Я отредактировал больше кода.

JustHeadache 27.05.2019 10:32

Если вы используете angular 6+ в своем приложении, лучше всего установить bootstrap через npm следующим образом:

npm install --save bootstrap

После установки бутстрапа добавьте эту строку в файл src/style.css:

@import 'bootstrap/dist/css/bootstrap.min.css';

Это даст вам все стили начальной загрузки, поэтому добавлять их в ваш файл index.html или файл angular.json не нужно.

Другие вопросы по теме