Как мне установить размер панели начальной загрузки?
Поэтому я делаю веб-страницу с использованием панелей. Идея состоит в том, чтобы извлекать строки из базы данных и отображать их на панелях. Я установил ширину основной панели на 15% и визуально изменил размер панели до 15%. Я хочу сделать панель кликабельной, поэтому я добавил (<‘a’>) окружает панель, к моему удивлению, что, хотя размер панели визуально составляет 15%, она по-прежнему занимает все горизонтальное пространство. Обратите внимание, что курсор — это рука
Я прилагаю свой код для этой части:
<?php
$sql = "SELECT * FROM pembelitkataku";
$result = mysqli_query($db, $sql);
while($row = $result->fetch_array())
{
?>
<a href="">
<div class="panel panel-primary" style="width: 15%">
<div class="panel-heading"><?php echo $row['text']; ?></div>
<div class="panel-body"><?php echo "<img src = 'images/".$row['image']."' width=\"100\">"?></div>
</div>
</a>
<?php
}
?>
У меня вопрос: как визуально и физически изменить размер панели до 15%, чтобы я мог разместить несколько панелей рядом?
Решение
Якоря являются встроенными элементами, а не на уровне блоков. Вы должны поместить свои якоря в панель div, не оборачивая ее.
Другие решения
Панели Bootstrap прекрасно впишутся внутрь Колонки бутстрапа.
Попробуйте обернуть полный набор <a> теги в <div class="container"> а также <div class="row">затем дайте каждому <a> пометить класс столбца как col-md-6 (два столбца шириной 50% при больших размерах экрана, переход на один столбец полной ширины при меньших размерах экрана).
Кроме того, избегайте использования жестко заданной ширины 15%. Используйте классы столбцов для определения ширины, так как система сетки Bootstrap по умолчанию отзывчива.
Полный пример:
<div class="container">
<div class="row">
<?php
$sql = "SELECT * FROM pembelitkataku";
$result = mysqli_query($db, $sql);
while($row = $result->fetch_array())
{
?>
<a href="" class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading"><?php echo $row['text']; ?></div>
<div class="panel-body"><?php echo "<img src = 'images/".$row['image']."' width=\"100\">"?></div>
</div>
</a>
<?php
}
?>
</div>
</div>
ОБНОВИТЬ
Чтобы ответить на конкретный вопрос о ширине 15%, попробуйте использовать col-md-2 класс на все <a> теги. Это на самом деле в конечном итоге 16.66666667%, но он будет визуально похож на 15%, который вы хотели изначально, но при этом позволит вам использовать преимущества системы сетки Bootstrap, чтобы вы могли размещать несколько панелей рядом. Я обновил свой пример, чтобы отразить это.