Я пытаюсь сделать свое приложение красивее с помощью 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:
я использовал
Затем я добавил в свой angular.json "./node_modules/bootstrap/dist/css/bootstrap.css" к стилям
А также
"./node_modules/bootstrap/dist/css/bootstrap.css" к стилям
"./node_modules/jquery/dist/jquery.min.js" к скриптам
Вы пробовали использовать строку и столбец с классом 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>
Такое ощущение, что в вашем приложении есть какой-то родительский элемент с фиксированной шириной. Может ли это быть так? Родительский элемент карточки должен использовать 100% ширины экрана.
Я новичок в css, знаете ли вы, какой элемент может быть родительским для карты? Я не знаю, если это может быть проблемой, потому что сейчас я просто пытаюсь отобразить центрированную карту, не более того
Если вы просматриваете исходный код страницы в своем браузере, вы можете проверить, помещена ли карточка в родительский элемент. Затем вы можете осмотреть его, чтобы увидеть, имеет ли он фиксированную ширину. Например, это может быть тег <div> или <body>, ограничивающий ширину вашего приложения.
Когда я пытаюсь отобразить простой текст, он начинается с того же места, где отображается моя карточка, между левым полем и серединой страницы.
Есть ли способ увидеть исходный HTML-код вашего приложения? Проверяли ли вы родительские элементы с фиксированной шириной или что-то еще, что сужает ширину вашей страницы?
Возможно, вы забыли включить один из необходимых файлов. У вас есть все это?
<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>
Да, вы правы, но я пытаюсь центрировать карточку, а не ее содержимое
Этот код заставляет мою "карточку" сдвигаться немного вправо, но недостаточно для центрирования.