#html #css #twitter-bootstrap #bootstrap-4 #card
Вопрос:
Я новичок в начальной загрузке (и веб-разработке в целом) и пытаюсь добиться следующего эффекта:
Часть моего кода такова:
<div id="content" class="p-4">
<div class="container-fluid">
<div class="card-columns">
<div class="card">
<div class="card-body">
<h5 class="card-title">Dashboard</h5>
<h6 class="card-subtitle mb-2 text-muted">Check your app stats by country</h6>
<select id="country-select" class="form-control form-select form-select-lg mb-3" aria-label=".form-select-lg example">
<option selected>Select a country</option>
</select>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Chart</h5>
<h6 class="card-subtitle mb-2 text-muted">Check your app stats by country</h6>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
<!-- CHART CODE AVAILABLE ON JSFIDDLE -->
</script>
</div>
</div>
</div>
</div>
</div> Моя версия начальной загрузки-4.6, и полный код доступен на JSFiddle
Комментарии:
1. Должен ли блок графика расти пропорционально по высоте?
2. Это было бы хорошо. На данный момент я пытаюсь использовать гибкий ящик, без карточек-колонок. Честно говоря, я понятия не имею, как лучше всего подойти.
Ответ №1:
Ваша проблема заключалась в использовании класса card-columns , который строго делит ваши карты на три столбца, column-count: 3 правило.
Гибкий график будет предпочтительнее для вашей задачи. Вместо класса card-columns я указал классы гибкости. Здесь:
<div class="d-flex align-items-sm-baseline">
Кроме того, для отступа я использовал gap правило, добавив этот селектор в css.
Для второго div с классом card я добавил flex-sm-grow-1 класс , чтобы этот div занимал все свободное пространство.
.container-fluid > .d-flex.align-items-sm-baseline {
gap: 20px;
}
@media (max-width: 767px) {
.container-fluid > .d-flex.align-items-sm-baseline {
flex-direction: column !important;
align-items: stretch !important;
}
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Android Rank Checker</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l" crossorigin="anonymous" />
<!-- Our Custom CSS -->
<link rel="stylesheet" href="style.css" />
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo 0N5UhStP3bvwWPq uvzCMfrN1fEFe xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<!-- chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" integrity="sha256-t9UJPrESBeG2ojKTIcFLPGF7nHi2vEc7f5A2KpH/UBU=" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-default bg-dark navbar-dark">
<div id="sidebarCollapse">
<i class="fas fa-bars"></i>
<a href="#" class="navbar-brand ml-3">Android Rank Checker</a>
</div>
</nav>
<div class="wrapper">
<!-- Page Content -->
<div id="content" class="p-4">
<div class="container-fluid">
<div class="d-flex align-items-sm-baseline">
<div class="card">
<div class="card-body">
<h5 class="card-title">Dashboard</h5>
<h6 class="card-subtitle mb-2 text-muted">Check your app stats by country</h6>
<select id="country-select" class="form-control form-select form-select-lg mb-3" aria-label=".form-select-lg example">
<option selected>Select a country</option>
</select>
</div>
</div>
<div class="card flex-sm-grow-1">
<div class="card-body">
<h5 class="card-title">Chart</h5>
<h6 class="card-subtitle mb-2 text-muted">Check your app stats by country</h6>
<canvas id="myChart" width="" height=""></canvas>
<script>
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: "# of Votes",
data: [12, 19, 3, 5, 2, 3],
backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(255, 206, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(255, 159, 64, 0.2)"],
borderColor: ["rgba(255, 99, 132, 1)", "rgba(54, 162, 235, 1)", "rgba(255, 206, 86, 1)", "rgba(75, 192, 192, 1)", "rgba(153, 102, 255, 1)", "rgba(255, 159, 64, 1)"],
borderWidth: 1,
},
],
},
options: {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
},
});
</script>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="sidebar.js"></script>
<script src="app.js"></script>
</body>
</html> Комментарии:
1. Большое вам спасибо! Есть ли способ предотвратить заполнение диаграммой всей доступной высоты экрана? Я также хотел бы сделать обертку flexbox (иметь диаграмму под <select>, когда она не на компьютере. Вы знаете, как это сделать? Еще раз заранее спасибо и приносим извинения за доставленные неудобства!
2. @xvlaze, без проблем. Да, это можно исправить, если удалить значения высоты и ширины из
<canvas id="myChart" width="400" height="400"></canvas>. Я обновил ответ. Проверьте, пожалуйста.3. @xvlaze, и я добавил медиа-запрос в ваш css. Шаблон теперь реагирует. Точка останова — 767 пикселей.
4. Абсолютная гениальная работа. Большое вам спасибо!! 🙂
Ответ №2:
У вас должно быть 2 колонки, у вас их 3.
@media (min-width: 576px)
.card-columns {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 1.25rem;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
orphans: 1;
widows: 1;
}
Комментарии:
1. Я боюсь, что это не решение.
Ответ №3:
Я бы использовал сеточную систему начальной загрузки.
Решение: https://jsfiddle.net/b459x1uy/2/
<div class="row">
<div class="col-4">
// Dashboard card
</div>
<div class="col">
// Chart card
</div>
</div>
Оберните свои карточки столбцами. В этом примере первый столбец (.col-4) занимает 12/4 ширины, второй столбец (.col) занимает все доступное пространство в этой строке.
Использование столбцов начальной загрузки также дает вам возможность управлять адаптивным макетом за один раз. Я бы не стал писать дополнительный CSS для определения размера ваших столбцов, не рассмотрев сначала сеточную систему начальной загрузки.
Комментарии:
1. Извините, но я ищу, чтобы диаграмма находилась в той же строке, что и <select>. Это просто помещает диаграмму под выбор.
2. Это удерживает их в одном ряду. Вы смотрели на пример jsfiddle, который я сделал?
3. Это может быть проблемой с отображением, но вывод JSFiddle показывает карты в одном столбце независимо от размера окна вывода.