[英]How do I set the size of a bootstrap panel?
So I am making a webpage using panels. 因此,我正在使用面板制作网页。 The idea is to fetch rows from database and display it on panels. 这个想法是从数据库中获取行并将其显示在面板上。 I set the width of the panel-primary to 15% and visually it resized the panel to 15%. 我将主面板的宽度设置为15%,并在视觉上将面板的大小调整为15%。 I want to make the panel clickable so I added an (<'a'>) surrounding the panel to my surprise that even though the panel is visually 15% in size, it still takes the whole horizontal space. 我想使面板可点击,因此我在面板周围添加了一个<< a'>),令我惊讶的是,即使面板的大小在视觉上为15%,它仍然占据了整个水平空间。 Notice the cursor is a hand 注意光标是一只手
I attach my code for this part: 我附上我这部分的代码:
<?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
}
?>
My question is, how do I visually and physically change the panel size to 15% so that I can put multiple panels side by side? 我的问题是,如何在视觉和物理上将面板尺寸更改为15%,以便可以并排放置多个面板?
Anchors are inline elements, not block level. 锚是内联元素,不是块级。 you should put your anchors inside the panel div, not wrapping it. 您应该将锚放置在面板div中,而不要包裹它。
Bootstrap panels will fit just fine inside Bootstrap's columns . Bootstrap面板恰好适合Bootstrap的栏内 。
Try wrapping the full set of <a>
tags in a <div class="container">
and <div class="row">
, then give each <a>
tag a column class like col-md-6
(two 50% width columns at larger screen sizes, switching to a single full-width column at smaller screen sizes). 尝试将完整的<a>
标记包装在<div class="container">
和<div class="row">
,然后为每个<a>
标记分配一个列类,例如col-md-6
(两个50%屏幕尺寸较大的宽列,切换到屏幕尺寸较小的单个全角列)。
Also, avoid using the hardcoded 15% width. 另外,避免使用15%的硬编码宽度。 Use the column classes to define the width, since Bootstrap's grid system is responsive by default. 由于默认情况下Bootstrap的网格系统会响应,因此使用列类来定义宽度。
Full example: 完整示例:
<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>
To answer your specific question about 15% widths, try using the col-md-2
class on all the <a>
tags. 要回答有关15%宽度的特定问题,请尝试在所有<a>
标记上使用col-md-2
类。 This actually ends up being 16.66666667%
, but it will be visually similar to the 15% you wanted originally, while still letting you take advantage of Bootstrap's grid system so you can put multiple panels side by side. 这实际上最终是16.66666667%
,但是在视觉上将与您最初希望的15%相似,同时仍然让您利用Bootstrap的网格系统,因此可以并排放置多个面板。 I updated my example to reflect this. 我更新了示例以反映这一点。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.