Как заставить мой navbar плавать, а также разделить список с помощью Bootstrap 4 - PullRequest
Новая
       58

Как заставить мой navbar плавать, а также разделить список с помощью Bootstrap 4

0 голосов
/ 10 апреля 2020

Я пытаюсь заставить мою панель навигации плавать вправо, а также разделяю список в панели навигации. Мне трудно после нескольких попыток. Прилагается мой пример кода, над которым я работал. я хочу создать что-то вроде этого 

$def with (page)
$var css: static/css/bootstrap.min.css static/css/bootstrap-material-design.scss
$var js: static/js/bootstrap.min.js static/js/bootstrapMaterialDesign.js static/js/jquery-3.4.1.min.js static/js/ripples.js static/js/scripty.js


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DEARENA</title>

    $if self.css:
        $for style in self.css.split():
            <link rel="stylesheet" href="$style" />
</head>
<body>
    <div id="app">
            <div class="navbar navbar-info navbar-fixed-top bg-light">
                <div class="nav navbar-header ">
                    <a class="navbar-brand">DeArena</a>
                </div>

                <ul class="nav navbar-nav" >
                    <li><a class="waves-effect" href="/"> Home Feed<div class="ripples-container"></div></a></li>
                    <li><a href="/trending">Trending<div class="ripples-container"></div></a></li>
                    <li><a href="/profile">Profile<div class="ripples-container"></div></a></li>
                    <li><a href="/settings">Settings<div class="ripples-container"></div></a></li>
                </ul>

                <div class="pull-right">
                    <a href="/register"class="container btn btn-raised btn-default waves-effect">Register</a>&nbsp;&nbsp;
                </div>
            </div>
        <br /><br /><br />

        $:page
    </div>

    $if self.js:
        $for script in self.js.split():
            <script scr="$script"></script>


</body>
</html>

1 Ответ

0 голосов
/ 11 апреля 2020

Попробуйте этот код bootstrap 4 версии 4.4.1 и измените текст в соответствии с вашими потребностями. 

<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="margin:24px 0;">
  <a class="navbar-brand" href="">Logo</a>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navb">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="">Contact</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <button class="btn btn-success my-2 my-sm-0" type="button">Search</button>
    </form>
  </div>
</nav>
...