Добавить пробел между двумя тегами <a>, используя только bootstrap? - PullRequest
Новая
       37

Добавить пробел между двумя тегами <a>, используя только bootstrap?

0 голосов
/ 03 марта 2020

Я использую PHP для l oop, чтобы напечатать 10 тегов на странице HTML.

Однако мне нужно, чтобы теги <a> отображались в разных строках с небольшим пробелом. Я знаю, что это может быть достигнуто с помощью пользовательского CSS, но есть ли способ достичь этого только с помощью bootstrap?

Я добавил HTML код для справки: 

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

Спасибо за вашу помощь!

Ожидаемый результат:

  1. Lorem Ipsum Dolor Sit Amet Concectetur Adipisicing Elit. Et debitis magnam sint labourisam mollitia qui

  2. Lorem ipsum dolor sit amet concectetur adipisicing elit. Et debitis magnam sint labourisam mollitia qui

  3. Lorem ipsum dolor sit amet concectetur adipisicing elit. Et debitis Magnam Sint Labouriosam Mollitia Qui

  4. Lorem Ipsum Dolor Sit Amet Concectetur Adipisicing Elit. Et debitis Magnam Sint Labouriosam Mollitia Qui

  5. Lorem Ipsum Dolor Sit Amet Concectetur Adipisicing Elit. Et debitis magnam sint labourisam mollitia qui

  6. Lorem ipsum dolor sit amet concectetur adipisicing elit. Et debitis Magnam Sint Laboriosam Mollitia Qui

  7. Lorem Ipsum Dolor Sit Amet Concectetur Adipisicing Elit. Et debitis Magnam Sint Labouriosam Mollitia Qui

  8. Lorem Ipsum Dolor Sit Amet Concectetur Adipisicing Elit. Et debitis Magnam Sint Labouriosam Mollitia Qui

  9. Lorem Ipsum Dolor Sit Amet Concectetur Adipisicing Elit. Et debitis magnam sint labourisam mollitia qui

  10. Lorem ipsum dolor sit amet concectetur adipisicing elit. Et debitis Magnam Sint Labouriosam Mollitia Qui

Ответы [ 3 ]

0 голосов
/ 03 марта 2020

Использовать упорядоченный список: 

<ol>
<?php for ( $i = 0; $i < 10; $i++ ): ?>
    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
<?php endfor; ?>
</ol>
0 голосов
/ 03 марта 2020

Обернуть в 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>
0 голосов
/ 03 марта 2020

Вы можете использовать класс 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; ?>

Ссылка 

<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 />
...