web-dev-qa-db-fra.com

Bootstrap changer la taille de police de la barre de navigation

J'ai perdu 2 heures à chercher la solution. Je veux changer la taille de police de la barre de navigation et changer la taille de police même dans les requêtes multimédias. Je peux changer la couleur et non la police et parfois la police change de taille dans le col-lg mais pas dans le media-queries

HTML 

<nav class="navbar navbar-default">
            <div class="container-fluid">

            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
            </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">

            <li class="active"><a href="#">Home<span class="sr-only">(current)</span></a></li>
            <li> <a class="nav-links" href="aboutus.html"><span style="white-space: nowrap">About Us</span></a> </li>
            <li> <a class="nav-links" href="whoweare.html"><span style="white-space: nowrap">Who We Are</span></a> </li>
            <li> <a class="nav-links" href="mission.html">Mission</a> </li>
            <li> <a class="nav-links" href="activities.html">Activities</a> </li>
            <li> <a class="nav-links" href="gallery.html">Gallery</a> </li>
            <li> <a class="nav-links" href="donate.html">Donate</a> </li>
            <li> <a class="nav-links" href="sitemap.html">Sitemap</a> </li>
            <li> <a class="nav-links" href="contactus.html"><span style="white-space: nowrap">Contact Us</span></a> </li>

          </ul>


        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
    </nav>

CSS 

 nav {
                width: 100%;
                height: 40px;
                background: -webkit-linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15);
                background: -o-linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15);
                background: linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15);
                border-radius: 6px !important;
                -moz-border-radius: 6px !important;
            }

        .nav a{
            color: white !important;
            font-size: 1.8em !important;
        }
twitter-bootstrapcsstwitter-bootstrap-3navbar
6
am guru prasath

Voici une démonstration fonctionnelle pour vous considérant que vous vouliez padding-right entre les liens Home et About etc.

Pour les liens, j'ai utilisé la classe css.nav li

 nav {
     width: 100%;
     height: 40px;
     background: -webkit-linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15);
     background: -o-linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15);
     background: linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15);
     border-radius: 6px !important;
     -moz-border-radius: 6px !important;
        }
.nav a{
    color: white !important;
    font-size: 1.8em !important;
    }
.nav li{
    padding-right:5px;
   }
3
Mike Ross