仅使用引导程序在两个 <a> 标记之间添加空格/换行符？答案

【问题标题】：Add space/break line between two <a> tags using bootstrap only?仅使用引导程序在两个 <a> 标记之间添加空格/换行符？
【发布时间】：2020-06-15 17:00:03
【问题描述】：

我正在使用 PHP for 循环在 HTML 页面中打印 10 个标签。

但是，我需要<a> 标签出现在不同的行中，并留有一些空间。我知道这可以使用自定义 CSS 来实现，但有没有办法仅通过引导程序来实现？

我已添加 HTML 代码以供参考：

<?php
for ($i = 0; $i < 10; $i++) { ?>
  <span><?php echo $i + 1; ?>. </span><a class href="#">Lorem ipsum dolor sit</a><br />
<?php } ?>

感谢您的帮助！

预期输出：

Lorem ipsum dolor sit amet consectetur adipisicing elit。 Et debitis magnam sint laboriosam mollitia qui
Lorem ipsum dolor sit amet consectetur adipisicing elit。 Et debitis magnam sint laboriosam mollitia qui
Lorem ipsum dolor sit amet consectetur adipisicing elit。 Et debitis magnam sint laboriosam mollitia qui
Lorem ipsum dolor sit amet consectetur adipisicing elit。 Et debitis magnam sint laboriosam mollitia qui
Lorem ipsum dolor sit amet consectetur adipisicing elit。 Et debitis magnam sint laboriosam mollitia qui
Lorem ipsum dolor sit amet consectetur adipisicing elit。 Et debitis magnam sint laboriosam mollitia qui
Lorem ipsum dolor sit amet consectetur adipisicing elit。 Et debitis magnam sint laboriosam mollitia qui
Lorem ipsum dolor sit amet consectetur adipisicing elit。 Et debitis magnam sint laboriosam mollitia qui
Lorem ipsum dolor sit amet consectetur adipisicing elit。 Et debitis magnam sint laboriosam mollitia qui
Lorem ipsum dolor sit amet consectetur adipisicing elit。 Et debitis magnam sint laboriosam mollitia qui

【问题讨论】：

添加预期的输出，这样我们就可以确定您到底想要完成什么。
这可能就是你想要的：getbootstrap.com/docs/4.0/layout/grid
寻找有序列表？
这也是一个 PHP 问题吗？你不能只发布呈现的 HTML 并删除 PHP 部分
为什么不用 div 换行？

标签： html css twitter-bootstrap-3 bootstrap-4

【解决方案1】：

您可以使用d-block 类制作<a> 标签块元素，以便每个标签从下一行开始

<?php for ($i = 0; $i < 10; $i++): ?>
    <div><span><?php echo $i + 1; ?>. </span>
    <a  href="#">Lorem ipsum dolor sit</a></div>
    <br />
<?php endfor; ?>

Reference

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<span>1. </span><a href="#">Lorem ipsum dolor sit</a><br />
<span>2. </span><a  href="#">Lorem ipsum dolor sit</a><br />
<span>3. </span><a  href="#">Lorem ipsum dolor sit</a><br />
<span>4. </span><a  href="#">Lorem ipsum dolor sit</a><br />
<span>5. </span><a  href="#">Lorem ipsum dolor sit</a><br />

【讨论】：

感谢您的回答。但我需要标签也在同一行。使用无法实现的此解决方案。数字和标签在不同的行
无需将 div 设为 d-block。还要更新我给你的 sn-p 或查看我的答案
@mplungjan 同意我只是在上面评论你需要添加包装器 div。感谢指正:)

【解决方案2】：

用 div 包裹？

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div><span>1. </span><a href="#">Lorem ipsum dolor sit</a></div>
<div><span>2. </span><a href="#">Lorem ipsum dolor sit</a></div>

【讨论】：

【解决方案3】：

使用有序列表：

<ol>
<?php for ( $i = 0; $i < 10; $i++ ): ?>
    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
<?php endfor; ?>
</ol>

【讨论】：