Отображение ссылок на панели навигации на мобильных устройствах одна под другой

Question

Как сделать так, чтобы ссылки отображались на мобильных устройствах (в настоящее время они не отображаются на мобильных устройствах) одна под другой (на ноутбуках и настольных компьютерах ссылки теперь отображаются горизонтально). Я все еще учусь, но я узнал достаточно, чтобы сделать HTML и реализовать некоторые из вещей, которые были описаны в stackoverflow о кодах HTML, CSS и JavaScript.

    <link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<nav class="navbar navbar-default">
<div class="row">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar">.
 </span>
    <span class="icon-bar">
 </span>
    <span class="icon-bar">
 </span>
  </button>
  <a class="navbar-brand" href="index.html  "><img src="images/a1-logo.jpg"/></a>
</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 navbar-right">
    <li style="padding: 0px 0px 0px 0px; list-style-type: none; list-style-image: none; list-style-position: outside; font-family: &quot;verdana&quot;; font-size: 18px; color: black;"><font face="verdana" size="4"><a href="index.html">Home <span class="sr-only">(current)</span></a></li>
    </font><li style="padding: 0px 0px 0px 0px; list-style-type: none; list-style-image: none; list-style-position: outside; font-family: &quot;verdana&quot;; font-size: 18px; color: black;"><font face="verdana" size="4"><a href="about.html">About Us</a></li>
    </font><li style="padding: 0px 0px 0px 0px; list-style-type: none; list-style-image: none; list-style-position: outside; font-family: &quot;verdana&quot;; font-size: 18px; color: black;"><font face="verdana" size="4"><a href="services.html">Services</a></li>
    </font><li style="padding: 0px 0px 0px 0px; list-style-type: none; list-style-image: none; list-style-position: outside; font-family: &quot;verdana&quot;; font-size: 18px; color: black;"><font face="verdana" size="4"><a href="Homeopathy-2.html">Homeopathy</a></li>
    </font><li style="padding: 0px 0px 0px 0px; list-style-type: none; list-style-image: none; list-style-position: outside; font-family: &quot;verdana&quot;; font-size: 18px; color: black;"><font face="verdana" size="4"><a href="testimonial.html">Testimonials</a></li>
    </font><li style="padding: 0px 0px 0px 0px; list-style-type: none; list-style-image: none; list-style-position: outside; font-family: &quot;verdana&quot;; font-size: 18px; color: black;"><font face="verdana" size="4"><a href="biz.html">Biz Offers</a></li>
    </font><li style="padding: 0px 0px 0px 0px; list-style-type: none; list-style-image: none; list-style-position: outside; font-family: &quot;verdana&quot;; font-size: 18px; color: black;"><font face="verdana" size="4"><a href="contact.html">Contact Us</a></li>
  </ul>
  
  </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav><!-- /.nav -->

Answer 1

Ниже показано, как элементы списка панели навигации отображаются на мобильном устройстве в виде столбца, а align-items и justify-content центрируют элементы как по X, так и по Y, удаляя их, если они не нужны. Медиа-запрос @media сработает, когда ширина устройства 768px, которая обычно используется для ширины планшета по умолчанию.

ul.nav {
  display: flex;
  // set direction of children to column based
  flex-direction: column;

  // if you wish to center items along X and Y axis
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  ul.nav {
    // change direction of children to row based
    flex-direction: row;
    
    // you can then unset align and justify if needed or used
    align-items: unset;
    justify-content: unset;
  }
}