Dev Faq
0
votes

Comment centrer les liens dans la vue mobile

<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>
Hi, the above HTML gives the following arrangement of URL in Desktop View and Mobile ViewI have used nav-justified class to justify the links in both desktop view and mobile view. While the desktop view is just fine (Three links appearing horizontally), In mobile view the 2nd link is slightly misaligned (links have to appear vertically). Is there a cleaner way to align the links in mobile view?
0 commentaires

4 Réponses :

0
votes 
<div class="container">
 <div class="row">
  <div class="col-md-12">
   some text
  </div>
 </div>
</div>
Try like that ?
0 commentaires
0
votes

Je pense que Glyphicon a utilisé un rembourrage supplémentaire ou une marge dans votre code. il suffit de mettre à jour

ou vous pouvez inspecter l'élément afin que vous puissiez voir où est ce rembourrage supplémentaire

2 commentaires

Salut maulik. Il y a la même quantité de rembourrage pour les trois glyphicons. Cependant, je pense que le désalignement a quelque chose à voir avec la longueur du texte que lorsque j'augmente la longueur du texte, l'URL est parfaitement alignée. Alors, pourrions-nous avoir un moyen de contourner cela?

@ Purushottam.prasad sont ces 3 liens est à gauche dans la vue mobile ?? Si oui, vous pouvez ajouter une classe de texte texte

0
votes

Je pense que votre utilisation de bootstrap. Nous pouvons utiliser la classe flex-colonne Lien de référence

1 commentaires

Merci pour la réponse Prime417 mais l'ajout de la colonne Flex déformera l'alignement horizontal dans la vue de bureau.

1
votes

réponse mise à jour em> strud>

Vous pouvez désormais donner individuellement la marge-droit à votre deuxième lien #pgmdetails code> p>

P> 

<!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>

2 commentaires

Merci pour la réponse @maulik, apprécie vraiment cela. Mais essayons de positionner l'URL au centre tout en maintenant le même alignement de gauche.

@ Purushottam.prasad Vous pouvez vérifier maintenant ma réponse mise à jour :)

Articles qui pourrait vous intéresser :

Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Mettez en surbrillance l'élément d'étiquette après avoir cliqué sur la case à cocher
Changer la direction de défilement de la page Web sur la version mobile
Target first-child css styled-components