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

【问题标题】：How do I set the size of a bootstrap panel?如何设置引导面板的大小？
【发布时间】：2017-04-10 19:55:49
【问题描述】：

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

【问题讨论】：

标签： php html twitter-bootstrap panel

【解决方案1】：

锚点是内联元素，不是块级的。您应该将锚点放在面板 div 内，而不是包装它。

【讨论】：

实际上，OP 的代码在 <a> 标签包裹 <div> 的情况下完全有效：stackoverflow.com/questions/6061869/…
如果他希望它成为块级元素，则不会。 a 标签包装将 div 更改为内联元素 - 从而导致问题。从语法上讲，这样做很好，只要您不希望 div 成为块元素。

【解决方案2】：

引导面板非常适合Bootstrap's columns。

尝试在<div class="container"> 和<div class="row"> 中包装完整的<a> 标签集，然后为每个<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% 宽度的具体问题，请尝试在所有 <a> 标记上使用 col-md-2 类。这实际上最终是16.66666667%，但它在视觉上与您最初想要的 15% 相似，同时仍然让您利用 Bootstrap 的网格系统，因此您可以并排放置多个面板。我更新了我的示例以反映这一点。

【讨论】：