html - Bootstrap 4 将列放在一起
问题描述
我正在为我的网站使用 Bootstrap 4。
但是我的专栏是在彼此下方而不是彼此相邻的。这是我的问题的屏幕截图
我希望有 4 列彼此相邻,其他列在该行下方。
这是我的 HTML 代码:
<section class="menu">
<div class="container">
<div class="row">
<div class="menu-slider">
<div>
<div class="text-center">
<h1 class="text-center">Dranken</h1>
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/introduction-image.png" class="menu-img-seperator">
<?php
$args = array(
'post_type' => 'menu',
'categories'=> 'frisdranken-per-glas');
$my_query = new WP_Query( $args );
?> <div class="col-md-4"><h3>Frisdranken per glas</h3> <?php
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<span style="font-weight: bold; font-style: cursive;"><?php the_title(); ?></span> - €<?php the_field('menu_price'); ?>,-<br>
<?php
endwhile;
}
?> </div> <?php
wp_reset_query();
?>
</div>
</div>
</div>
</div>
</section>
解决方案
好的,我不太了解您的问题,但是如果您想在同一行中放置 4 个列,则需要使用 col-md-3 而不是 col-md-4 (12/4=3);另一方面,bootstarp 4 将 cols 放入一个行容器中,我知道在循环中创建一个行容器很棘手,因此您可以在函数或模板中分离您的表示,我猜您正在使用 wordpress
function visual_presentation($key, $nama){ //$key = frisdranken-per-glas $name = Frisdranken per glas
$args = array(
'post_type' => 'menu',
'categories'=> $key);
$my_query = new WP_Query( $args );
if( $my_query->have_posts() ) : ?>
<div class="row">
<div class="col-md-12">
<h3><?= $name ?></h3>
</div>
</div>
<?php
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<div class="row">
<div class="col-md-3">
<span style="font-weight: bold; font-style: cursive;">
<?php the_title(); ?>
</span> - €<?php the_field('menu_price'); ?>,-<br>
</div>
</div>
<?php endwhile;
endif;
wp_reset_query();
}
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/introduction-image.png" class="menu-img-seperator">
<?php
visual_presentation('frisdranken-per-glas', "Frisdranken per glas");
visual_presentation('frisdranken-per-fles', "Frisdranken per fles");
?>
推荐阅读
- c++ - 如何使用 GMP 有效地添加 3 个大整数
- python - IPython.embed() 不使用终端颜色
- apache-kafka - Apache Kafka 沿袭信息
- c# - 检查列表中是否存在项目并将值推送到其中 - 一次性
- r - R中GLM.NB包中的偏移量和重量有什么区别?
- javascript - 具有基本身份验证的 Node.js http post 请求
- c# - 使用 gitlab ci 运行集成测试步骤时连接到外部 mongo 实例时的 MongoDb.Driver 2.5.0 连接超时
- ios - Mapbox折线安装图像未找到错误
- c - 转换不完整的结构指针是未定义的行为吗?
- ios - 为什么在 swift 4 中使用正确格式时 Date 会返回 nil?