Невозможно центрировать div Bootstrap4 / Angular

Я пытаюсь сделать свое приложение красивее с помощью Bootstrap,

В настоящее время я пытаюсь центрировать "карта" из Bootstrap

Я нашел способ сделать это с помощью mx-auto

Мой код с mx-auto работает только в JSFiddle

<div class = "card text-white bg-info mx-auto" style = "max-width: 18rem;">
    <div class = "card-header">Header</div>
        <div class = "card-body">
            <h5 class = "card-title">Info card title</h5>
            <p class = "card-text">Some quick example text to build on the card title and make up the bulk of the     card's content.</p>
        </div>
    </div>
</div>

Но в моем приложении карта не центрирована, кто-нибудь знает, почему это происходит?

Версия начальной загрузки, которую я встроил в свой проект Angular, - 4.1.2.

Вот как я встроил Bootstrap в свой проект angular:

я использовал

  1. npm install bootstrap --save
  2. npm install jquery --save
  3. npm install popper.js --save

Затем я добавил в свой angular.json "./node_modules/bootstrap/dist/css/bootstrap.css" к стилям

А также

  • "./node_modules/bootstrap/dist/css/bootstrap.css" к стилям

  • "./node_modules/jquery/dist/jquery.min.js" к скриптам

  • "./node_modules/popper.js/dist/umd/popper.min.js" в скрипты
  • "./node_modules/bootstrap/dist/js/bootstrap.min.js" в скрипты
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в 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. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
0
2 248
3

Ответы 3

Вы пробовали использовать строку и столбец с классом justify-content-center:

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity = "sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin = "anonymous">

<div class = "row justify-content-center">
    <div class = "col-lg-4 col-md-4 col-sm-4">
      <div class = "card text-white bg-info">
        <div class = "card-header">Header</div>
        <div class = "card-body">
          <h5 class = "card-title">Info card title</h5>
          <p class = "card-text">Some quick example text to build on the card title and make up the bulk of the     card's content.</p>
        </div>
      </div>
    </div>
</div>

Этот код заставляет мою "карточку" сдвигаться немного вправо, но недостаточно для центрирования.

John Snow 13.07.2018 15:39

Такое ощущение, что в вашем приложении есть какой-то родительский элемент с фиксированной шириной. Может ли это быть так? Родительский элемент карточки должен использовать 100% ширины экрана.

Jeppsen 13.07.2018 15:58

Я новичок в css, знаете ли вы, какой элемент может быть родительским для карты? Я не знаю, если это может быть проблемой, потому что сейчас я просто пытаюсь отобразить центрированную карту, не более того

John Snow 13.07.2018 16:16

Если вы просматриваете исходный код страницы в своем браузере, вы можете проверить, помещена ли карточка в родительский элемент. Затем вы можете осмотреть его, чтобы увидеть, имеет ли он фиксированную ширину. Например, это может быть тег <div> или <body>, ограничивающий ширину вашего приложения.

Jeppsen 13.07.2018 16:21

Когда я пытаюсь отобразить простой текст, он начинается с того же места, где отображается моя карточка, между левым полем и серединой страницы.

John Snow 13.07.2018 16:24

Есть ли способ увидеть исходный HTML-код вашего приложения? Проверяли ли вы родительские элементы с фиксированной шириной или что-то еще, что сужает ширину вашей страницы?

Jeppsen 13.07.2018 16:28

Возможно, вы забыли включить один из необходимых файлов. У вас есть все это?

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">


<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>


<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

В bootstrap 4 у вас есть встроенный CSS text-center, поэтому вы можете использовать его в любом классе div для центрирования содержимого.

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class = "card text-white bg-info mx-auto text-center" style = "max-width: 18rem;">
    <div class = "card-header">Header</div>
        <div class = "card-body">
            <h5 class = "card-title text-center">Info card title</h5>
            <p class = "card-text">Some quick example text to build on the card title and make up the bulk of the     card's content.</p>
        </div>
    </div>
</div>

Да, вы правы, но я пытаюсь центрировать карточку, а не ее содержимое

John Snow 13.07.2018 16:11

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