时间戳

首页 > 解决方案 > 如何正确对齐菜单三明治 bootsrap 4

html - 如何正确对齐菜单三明治 bootsrap 4

问题描述

我的代码有问题，无法正确对齐标题​​中的菜单三明治。问题是，当我将 Bowser 宽度设置为最小尺寸时，菜单三明治位于徽标下方而不是徽标右侧。另外，当弓形器较大时，我希望它位于标题的最右侧。我做了研究，但我不知道如何操作这个菜单。我看到的代码与菜单三明治的代码几乎相同，但它的行为方式与我网站中的行为方式不同。

我的代码：

HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Cantarell" rel="stylesheet">
    <title>Rev'Iso entreprise de rénovation et d'isolation (rénovation énergétique) de votre habitat.  
    </title>
    <meta name="description" content="Rev'iso vous propose ses artisans pour la réalisation de différents travaux de rénovation et d'isolation dans 
    votre habitat avec des certication de qualité." />
</head>
<body>
    <div class="container-fluid" style="background:transparent url('images/fond_header8.jpg') no-repeat center center;min-height : 485px;">

                <div class="row" style="background:transparent url('images/bar.png') repeat-x;">
                    <!-- Taille 6 sur smartphones, 4 sur tablettes, 3 sur desktop et plus -->
                    <div class="col-xs-6 col-sm-4 col-md-3">
                        <img src="images/logo.png">
                    </div>
                    <!-- Taille 6 sur smartphones et tablettes, 7 sur desktop et plus -->
                    <div class="col-md-3 d-none d-lg-block">
                        <span class="textTel"> <img src="images/telline.svg"/ width="95px" height="70px"> 09 82 52 79 04</span>
                    </div>
                    <!-- Masquée sur smartphones, taille 2 sur tablettes et plus -->
                    <div class="col-sm-7 col-md-6 hidden-xs" style="vertical-align:middle;">
                        <nav class="navbar navbar-expand-lg navbar-light bg-light">

                          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                          </button>
                          <div class="collapse navbar-collapse" id="navbarNav">
                            <ul class="navbar-nav">
                              <li class="nav-item active">
                                <a class="nav-link" href="index.html">Accueil <span class="sr-only">(current)</span></a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" href="renovation.html">Rénovation</a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" href="isolation.html">Isolation</a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" href="devis.html">Devis</a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" href="#">Contact</a>
                              </li>
                            </ul>
                          </div>
                        </nav>
                    </div>
                </div>

CSS：

body{
background-color: #C7C8C9;
width:100%;
margin:0px;
padding:0px;
}

.container-fluid { 
  padding-right: 0px;
  padding-left: 0px;
  margin-right: auto;
  margin-left: auto;
  padding-bottom :0px;
  padding-top:0px;
}

.lienpage{
    background-color:#ff5300;
    color:white;
    line-height:45px;
    text-align:center;
    width:260px; 
    border-radius: 12px;
    margin:auto;
    position : relative;
}

.lienpage:hover{
    background-color:#EC9200;
}

.lienpage a{
color : white;
font-size: 17px;
}

.row {
    margin-bottom: 0px;
}

.row [class^="col-"] {
    padding-bottom: 0px;

}

.navbar-nav li{
    background : url(images/separateur.png) no-repeat;
background-position : left;
}

.navbar-nav li a {
 line-height: 80px;

}


.bg-light {

    background-color: transparent !important;
}


p {
    font-family: 'Cantarell', sans-serif;
    font-size: 18px;
    line-height: 25px;
    color : #398e9d;
    font-weight:bold;
}

.textTel {
    font-family: 'Droid Serif', Georgia, Times, serif;
    font-size: 22px;
    line-height: 80px;
    color : #ff6400;
    font-weight:bold;
}

.texteBlanc {
    font-family: 'Cantarell', sans-serif;
    font-size: 18px;
    color : #fff;
    font-weight:bold;
}

.greenbluetext {
    font-family: 'Cantarell', sans-serif;
    font-size: 26px;
    color : #006e71;
    font-weight:bold;
    text-align : center;
}

.textTel {
    font-family: 'Droid Serif', Georgia, Times, serif;
    font-size: 22px;
    line-height: 105px;
    color : #ff6400;
    font-weight:bold;
}

.titreCategorieHome {
    font-family: 'Cantarell', sans-serif;
    color : #FFF;
    font-size: 16px;
    font-weight:bold;
}

截图：

菜单未正确对齐

菜单下

谢谢您的帮助。

标签： htmlcssbootstrap-4

解决方案

我自己解决了这个问题，这里的代码更适合导航栏。

<body>
    <div style="background:transparent url('images/fond_header8.jpg') no-repeat center center;min-height : 485px; position:relative;">



                    <!-- Masquée sur smartphones, taille 2 sur tablettes et plus -->

                    <nav class="navbar navbar-expand-lg navbar-light bg-light" style="background:transparent url('images/bar.png') repeat-x;">

                        <div class="navbar-header">

                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

                        </button>
                        <a class="navbar-brand" href="index.html"><span class="logo"><img src="images/logo.png"></span></a>
                        </div>


                          <div class="collapse navbar-collapse" id="navbarNav" style="position:absolute; right:100px;bottom:80px;">
                            <ul class="nav navbar-nav ml-auto">
                              <li class="nav-item active">
                                <a class="nav-link" href="index.html">Accueil <span class="sr-only">(current)</span></a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" href="renovation.html">Rénovation</a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" href="isolation.html">Isolation</a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" href="devis.html">Devis</a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" href="#">Contact</a>
                              </li>
                            </ul>

                          </div>
                        </nav>

但我只剩下一个问题了。我在第一个 div 上放置了相对位置，在菜单上放置了绝对位置，以将菜单定位在中间，因为 line-height 不再起作用：

.navbar-nav li{
    background : url(images/separateur.png) no-repeat;
background-position : left;
}

.navbar-nav li a {
    color:blue;
 line-height: 80px;

}

有谁知道为什么？如果没有人知道我会保持这种方式。谢谢。

推荐阅读