在Bootstrap 4中使菜单图标不动且全角下拉菜单

时间：2018-07-29 09:58:44

标签： javascript html css bootstrap-4

我有2个大问题，我不知道如何解决！

这是我的代码：

@font-face {
    font-family: 'yekani';
    src: url("../fonts/yekan.ttf");
}
@font-face {
    font-family: 'yekani';
    src: url("../fonts/yekan.eot");
}
@font-face {
    font-family: 'yekani';
    src: url("../fonts/yekan.woff");
}

body{
    font-family: yekani;
}
.container-fluid{
    padding: 0 6rem;
}
.menu{
}
.links a{
    font-size: 1.25rem;
    color: #333;
}
.menu{
    box-shadow: 0 1px 4px 1px #d0d0d0;
}
.logo img{
    width: 120px;
}
.btn-outline-primary{
    border-width: 2px;
    border-color: #cce1e7;
    color: #3dacd9;
}

.navbar-nav .nav-link{
    padding-left: 2rem !important;
}
.links i{
    color: #f5f5f5;
    font-size: 1.2rem;
}
.navbar-toggler i{
font-size: 2rem;
}


.navbar .dropdown {position:static;}

.navbar .dropdown-menu {
    width:80rem;
    left:0;
    right:40rem;
    /*  height of nav-item  */
    top:5rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>مثال بوت استرپ</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

</head>
<body>

    <div class="container-fluid menu">
    <div class="d-flex  ">
        <div class="mr-auto ">
        <button class="btn btn-outline-primary btn-lg mb-4 mt-4 pt-2 pb-2 ">
            <i class="fas fa-arrow-left"></i>
            عضویت : ورود
        </button>
        </div>
        <div class="links ">
            <nav class=" navbar navbar-expand-xl mb-4 mt-4">

                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" >
                    <i class="fas fa-bars text-dark "></i>
                </button>

            <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav navbar-light">
                <li class="nav-item "><a class="nav-link " href="">ارتباط با ما</a></li>
                <i class="fas fa-ellipsis-v  m-3"></i>

                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" >
                        دوره های مجازی
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#" > دوره های مجازی</a>
                        <a class="dropdown-item" href="#">دوره های مجازی</a>
                        <a class="dropdown-item" href="#">دوره های مجازی</a>
                    </div>
                </li>

                <i class="fas fa-ellipsis-v m-3"></i>

                <li class="nav-item "><a class="nav-link" href="">دوره های متخصص</a></li>
                <i class="fas fa-ellipsis-v m-3"></i>

                <li class="nav-item "><a class="nav-link borderl" href="">محتوا</a></li>
            </ul>
            </div>
            </nav>
        </div>
        <div class="logo mt-4 mb-4 ml-5 d-none d-xl-block">
            <img src="https://s.7learn.com/themes/slt/assets/img/logo.png" alt="">
        </div>
    </div>
</div>

</body>
</html>

1是菜单图标！此菜单图标移动！令人难以置信。我无法使我的菜单图标静止不动！ 和2是我想要我的下拉全角，我尝试，我认为我的代码是正确的全角下拉，但是它不起作用，范围损坏！向右！ 重要的是： 如果您更改我的代码，请告诉我您做了什么。 坦克很多，对语法问题感到抱歉！ 我是伊朗人，英语不是很好

1 个答案:

答案 0 :(得分：2)

像这样更改您的结构。将您的左键保持在导航栏内而不是外部。为此使用引导程序的navbar-brand类。

@font-face {
  font-family: 'yekani';
  src: url("../fonts/yekan.ttf");
}

@font-face {
  font-family: 'yekani';
  src: url("../fonts/yekan.eot");
}

@font-face {
  font-family: 'yekani';
  src: url("../fonts/yekan.woff");
}

body {
  font-family: yekani;
}

.container-fluid {
  padding: 0 6rem;
}

.menu {}

.links a {
  font-size: 1.25rem;
  color: #333;
}

.menu {
  box-shadow: 0 1px 4px 1px #d0d0d0;
}

.logo img {
  width: 120px;
}

.btn-outline-primary {
  border-width: 2px;
  border-color: #cce1e7;
  color: #3dacd9;
}

.navbar-nav .nav-link {
  padding-left: 2rem !important;
}

.links i {
  color: #f5f5f5;
  font-size: 1.2rem;
}

.navbar-toggler i {
  font-size: 2rem;
}

.navbar .dropdown {
  position: static;
}

.navbar .dropdown-menu {
  width: 80rem;
  left: 0;
  right: 40rem;
  /*  height of nav-item  */
  top: 5rem;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>مثال بوت استرپ</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

</head>

<body>

  <div class="container-fluid menu">
    <div class="links ">
      <nav class=" navbar navbar-expand-xl mb-4 mt-4">
        <button class="btn btn-outline-primary btn-lg mb-4 mt-4 pt-2 pb-2 navbar-brand ">
            <i class="fas fa-arrow-left"></i>
            عضویت : ورود
        </button>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                    <i class="fas fa-bars text-dark "></i>
                </button>

        <div class="collapse navbar-collapse" id="collapsibleNavbar">
          <ul class="navbar-nav navbar-light">
            <li class="nav-item "><a class="nav-link " href="">ارتباط با ما</a></li>
            <i class="fas fa-ellipsis-v  m-3"></i>

            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                        دوره های مجازی
                    </a>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#"> دوره های مجازی</a>
                <a class="dropdown-item" href="#">دوره های مجازی</a>
                <a class="dropdown-item" href="#">دوره های مجازی</a>
              </div>
            </li>

            <i class="fas fa-ellipsis-v m-3"></i>

            <li class="nav-item "><a class="nav-link" href="">دوره های متخصص</a></li>
            <i class="fas fa-ellipsis-v m-3"></i>

            <li class="nav-item "><a class="nav-link borderl" href="">محتوا</a></li>
          </ul>
        </div>
      </nav>
    </div>
    <div class="logo mt-4 mb-4 ml-5 d-none d-xl-block">
      <img src="https://s.7learn.com/themes/slt/assets/img/logo.png" alt="">
    </div>
  </div>


</body>

</html>

相关问题
最新问题