如何设置 bootstrap 面板的大小？

Question

所以我正在使用面板制作网页。这个想法是从数据库中获取行并将其显示在面板上。我将 panel-primary 的宽度设置为 15%，并在视觉上将面板的大小调整为 15%。我想让面板可点击，所以我在面板周围添加了一个 (<'a'>)，令我惊讶的是，即使面板在视觉上的尺寸是 15%，它仍然占据整个水平 space。注意光标是一只手

我附上这部分的代码：

<?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%，以便我可以并排放置多个面板？

Answer 1

锚是行内元素，不是块级的。你应该把你的锚放在面板内 div，而不是包裹它。

Answer 2

Bootstrap 面板正好适合 Bootstrap's columns.

尝试将整套 <a> 标签包装在 <div class="container"> 和 <div class="row"> 中，然后给每个 <a> 标签一个 class 列，例如 col-md-6（在较大的屏幕尺寸下两个 50% 宽的列，在较小的屏幕尺寸下切换到一个全宽列）。

另外，避免使用硬编码的 15% 宽度。使用列 classes 来定义宽度，因为 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% 宽度的具体问题，请尝试在所有 <a> 标签上使用 col-md-2 class。这实际上最终是 16.66666667%，但它在视觉上与您最初想要的 15% 相似，同时仍然让您利用 Bootstrap 的网格系统，因此您可以并排放置多个面板.我更新了示例以反映这一点。

如何设置 bootstrap 面板的大小？

How do I set the size of a bootstrap panel?

html

php

panel

twitter-bootstrap

更新