Как центрировать ссылки в мобильной версии - PullRequest
Новая
       1

Как центрировать ссылки в мобильной версии

0 голосов
/ 18 июня 2020 
<div id="DonorLinks">
            <hr>
            <ul id="donorLinkSection" class="nav nav-justified">
                <li id="IntroVideo" class="navLinks">
                    <a id="DonorIntroVideoLink" href="/" onclick="return someFunction()">
                        <i class="fa fa-play-circle"></i>Watch introductory video
                    </a>
                </li>
                <li id="PgmDetails" class="navLinks"><a id="PgmDetailsPageLink" href="DonorDetails"><i class="glyphicon glyphicon-list-alt" aria-hidden="true"></i>View program details</a></li>
                <li id="TestimonialLink" class="navLinks"><a id="TestimonialPageLink" href="DonorTestimonials"><i class="fa fa-commenting"></i>See what nonprofits say</a></li>
            </ul>
            <hr>
            </div>

Привет, приведенный выше HTML дает следующее расположение URL-адресов в представлении рабочего стола и мобильном представлении

Я использовал класс с выравниванием по навигации для обоснования ссылок как в представлении рабочего стола, так и в мобильном представлении. Хотя для рабочего стола все в порядке (три ссылки отображаются по горизонтали), в мобильной версии вторая ссылка немного смещена (ссылки должны отображаться вертикально). Есть ли более чистый способ выровнять ссылки в мобильной версии?

Ответы [ 4 ]

1 голос
/ 18 июня 2020

ответ обновлен

теперь вы можете индивидуально указать маржу для вашей второй ссылки #PgmDetails

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css">

<style>
#PgmDetails { margin-right: 22px; } <!-- as per your need-->
</style>
</head>
<body>
<div id="DonorLinks">
            <hr>
            <ul id="donorLinkSection" class="nav nav-justified">
                <li id="IntroVideo" class="navLinks">
                    <a id="DonorIntroVideoLink" href="/" onclick="return someFunction()">
                        <i class="fa fa-play-circle"></i>Watch introductory video
                    </a>
                </li>
                <li id="PgmDetails" class="navLinks"><a id="PgmDetailsPageLink" href="DonorDetails"><i class="glyphicon glyphicon-list-alt" aria-hidden="true"></i>View program details</a></li>
                <li id="TestimonialLink" class="navLinks"><a id="TestimonialPageLink" href="DonorTestimonials"><i class="fa fa-comments"></i>See what nonprofits say</a></li>
            </ul>
            <hr>
            </div>
</body>

</html>
0 голосов
/ 18 июня 2020

Я думаю, что в вашем коде glyphicon использовались дополнительные отступы или поля. просто обновите

<i class="glyphicon glyphicon-list-alt ml-0 pl-0" aria-hidden="true"></i>

или вы можете проверить элемент, чтобы увидеть, где это дополнительное заполнение

0 голосов
/ 18 июня 2020

Я думаю, вы используете Bootstrap. Мы можем использовать класс гибких столбцов Ссылка

0 голосов
/ 18 июня 2020 
<div class="container">
 <div class="row">
  <div class="col-md-12">
   some text
  </div>
 </div>
</div>

Так попробовать?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...