【发布时间】：2020-07-06 00:49:48
【问题描述】：
让引导卡的配置正常工作时遇到了一些问题。原始模板配置为每行 1 个项目和列中的部分。我想把它做成看起来类似于宝丽来的卡片，但坚持使用引导程序 4 以保持清洁。
原始模板（我删除了一些代码以缩短问题！）
<form action="<?php echo $action; ?>" method="post" name="userForm">
<?php
for ($i=0, $x=count($this->rows); $i < $x; $i++){
$row = $this->rows[$i];
$buyer = $userHelper->getUser($row->publisher_userid);
}
?>
<div class="row">
<div class="col-md-1">
<?php
$attrib = 'width=56 height=56 class="img-polaroid"';
$avatar = JblanceHelper::getLogo($row->publisher_userid, $attrib);
echo !empty($avatar) ? LinkHelper::GetProfileLink($row->publisher_userid, $avatar) : ' ' ?>
</div>
<div class="col-md-6">
<h3 class="media-heading">
<?php echo LinkHelper::getProjectLink($row->id, $row->project_title); ?>
</h3>
<div class="font14">
<strong><?php echo Text::_('COM_JBLANCE_POSTED_BY'); ?></strong>: <?php echo LinkHelper::GetProfileLink($row->publisher_userid, $buyer->$nameOrUsername); ?>
</div>
<div class="font14">
<strong><?php echo Text::_('COM_JBLANCE_SKILLS_REQUIRED'); ?></strong>: <?php echo JblanceHelper::getCategoryNames($row->id_category, 'tags-link', 'project'); ?>
</div>
<div class="font14">
<strong><?php echo Text::_('COM_JBLANCE_LOCATION'); ?></strong>: <span class=""><?php echo JblanceHelper::getLocationNames($row->id_location); ?></span>
</div>
<ul class="promotions">
<?php if($row->is_featured) : ?>
<li data-promotion="featured"><?php echo Text::_('COM_JBLANCE_FEATURED'); ?></li>
<?php endif; ?>
</ul>
</div>
<div class="col-md-3">
<div>
<i class="jbf-icon-tags"></i> <?php echo Text::_('COM_JBLANCE_BIDS'); ?> :
<?php if($sealProjectBids || $row->is_sealed) : ?>
<span class="badge badge-info"><?php echo Text::_('COM_JBLANCE_SEALED'); ?></span>
<?php else : ?>
<span class="badge badge-info"><?php echo $bidsCount; ?></span>
<?php endif; ?>
</div>
<div>
<i class="jbf-icon-flag"></i> <?php echo Text::_('COM_JBLANCE_STATUS'); ?> : <?php echo $model->getLabelProjectStatus($row->status); ?>
</div>
</div>
<div class="col-md-2">
<div class="bid_project_left text-center">
<div><?php echo Text::_('COM_JBLANCE_AVG_BID'); ?></div>
<?php if($sealProjectBids || $row->is_sealed) : ?>
<span class="badge badge-info"><?php echo Text::_('COM_JBLANCE_SEALED'); ?></span>
<?php else : ?>
<span class="font16 boldfont"><?php echo JblanceHelper::formatCurrency($avg, true, false, 0); ?></span><?php echo ($row->project_type == 'COM_JBLANCE_HOURLY') ? ' / '.Text::_('COM_JBLANCE_HR') : ''; ?>
<?php endif; ?>
</div>
</div>
</div>
<div class="lineseparator"></div>
<?php
}
?>
<?php if(!count($this->rows)){ ?>
<div class="alert alert-info">
<?php echo Text::_('COM_JBLANCE_NO_PROJECT_POSTED'); ?>
</div>
<?php } ?>
<div class="pagination pagination-centered clearfix">
<div class="display-limit float-right">
<?php echo Text::_('JGLOBAL_DISPLAY_NUM'); ?> 
<?php echo $this->pageNav->getLimitBox(); ?>
</div>
<?php echo $this->pageNav->getPagesLinks(); ?>
</div>
<?php
$link_rss = Route::_('index.php?option=com_jblance&view=project&format=feed');
$rssvisible = (!$config->showRss) ? 'style=display:none' : '';
?>
<div class="jbrss" <?php echo $rssvisible; ?>>
<div id="showrss" class="float-right">
<a href="<?php echo $link_rss; ?>" target="_blank">
<img src="components/com_jblance/images/rss.png" alt="RSS" title="<?php echo Text::_('COM_JBLANCE_RSS_IMG_ALT'); ?>">
</a>
</div>
</div>
<input type="hidden" name="option" value="com_jblance" />
<input type="hidden" name="task" value="" />
</form>
我的最新版本是； （再次删除一些代码以首先关注布局。
<form action="<?php echo $action; ?>" method="post" name="userForm">
<a href="<?php echo $link_search; ?>" class="float-right btn btn-outline-primary mt-3"><?php echo Text::_('COM_JBLANCE_SEARCH_PROJECTS'); ?></a>
<div class="clearfix"></div>
<div class="jbl_h3title"><?php echo $this->escape($this->params->get('page_heading', Text::_('COM_JBLANCE_LIST_OF_PROJECTS'))); ?></div>
<?php
for ($i=0, $x=count($this->rows); $i < $x; $i++){
$row = $this->rows[$i];
$buyer = $userHelper->getUser($row->publisher_userid);
}
?>
<div class="container-fluid mt-4 md-12">
<div class="row col-lg-3 col-md-2 col-sm-12">
<div class="col-auto mb-3">
<div class="card h-100 mb-4">
<img class="img-responsive" src="<?php echo $projectimages[0]['thumb']; ?>">
<div class="card-body">
<h3 class="card-title">
<?php echo LinkHelper::getProjectLink($row->id, $row->project_title); ?>
</h3>
<p class="card-text">
<strong><?php echo Text::_('COM_JBLANCE_POSTED_BY'); ?></strong>: <?php echo LinkHelper::GetProfileLink($row->publisher_userid, $buyer->$nameOrUsername); ?>
</p>
<p class="card-text">
<strong><?php echo Text::_('COM_JBLANCE_SKILLS_REQUIRED'); ?></strong>: <?php echo JblanceHelper::getCategoryNames($row->id_category, 'tags-link', 'project'); ?>
</p>
<p class="card-text">
<strong><?php echo Text::_('COM_JBLANCE_LOCATION'); ?></strong>: <span class=""><?php echo JblanceHelper::getLocationNames($row->id_location); ?></span>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- End of Card -->
<div class="lineseparator"></div>
<?php
}
?>
<?php if(!count($this->rows)){ ?>
<div class="alert alert-info">
<?php echo Text::_('COM_JBLANCE_NO_PROJECT_POSTED'); ?>
</div>
<?php } ?>
<div class="pagination pagination-centered clearfix">
<div class="display-limit float-right">
<?php echo Text::_('JGLOBAL_DISPLAY_NUM'); ?> 
<?php echo $this->pageNav->getLimitBox(); ?>
</div>
<?php echo $this->pageNav->getPagesLinks(); ?>
</div>
<?php
$link_rss = Route::_('index.php?option=com_jblance&view=project&format=feed');
$rssvisible = (!$config->showRss) ? 'style=display:none' : '';
?>
<div class="jbrss" <?php echo $rssvisible; ?>>
<div id="showrss" class="float-right">
<a href="<?php echo $link_rss; ?>" target="_blank">
<img src="components/com_jblance/images/rss.png" alt="RSS" title="<?php echo Text::_('COM_JBLANCE_RSS_IMG_ALT'); ?>">
</a>
</div>
</div>
<input type="hidden" name="option" value="com_jblance" />
<input type="hidden" name="task" value="" />
</form>
我遇到的问题是卡片是作为每行一张卡片创建的，左对齐，大约是页面/容器宽度的 1/3 或 1/4。在创建下一行之前，如何让它们从左到右流动，每行 3 或 4 个？我怎么不见了？非常感谢。
【问题讨论】：
标签： php html css mysqli bootstrap-4