如何设置引导面板的大小？

Question

所以我正在使用面板制作网页。我们的想法是从数据库中获取行并将其显示在面板上。我将panel-primary的宽度设置为15％，并在视觉上将面板的大小调整为15％。我想让面板可点击，所以我在面板周围添加了一个（＆lt;'a'＆gt;），令我惊讶的是，即使面板的视觉尺寸为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％，以便我可以将多个面板并排放置？

Answer 1

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

Answer 2

Bootstrap面板可以很好地适应Bootstrap's columns。

尝试在<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的网格系统，这样你就可以并排放置多个面板。我更新了我的例子以反映这一点。