gpt4 book ai didi

html - 如何在 Bootstrap 中的导航上方获取 Logo 和标题文本?

转载 作者:行者123 更新时间:2023-11-27 23:30:44 25 4
gpt4 key购买 nike

我正在尝试制作一个网站,该网站的左侧是 Logo ,导航上方的中间是文本。

我已尝试浏览 Bootstrap 文档,但无法使其正常工作。我能够在导航上方获得 Logo 和文本,但是在调整窗口大小时(以在移动设备上进行测试),标题会与页面重叠,因此无法阅读标题。

CSS:

}
.container{box-shadow:
inset 10px 0px 10px -10px rgba(0,0,0,0.5),
inset -10px 0px 10px -10px rgba(0,0,0,0.5);
padding:0px;}
.topnav {
overflow: hidden;
background-color: orangered;
text-align:center;

}
img.flag {max-width:30px; max-height:30px; vertical-align: middle; display:inline-block ; list-style-position: inside;}
.topnav a {

display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 10px 10px;
text-decoration: none;
font-size: 20px;
font-family: MuseoSans-500;
font-weight: normal;
font-style: normal;

}

.fa {font-size:20px !important;}
.topnav a:hover {
color: black;
}

h1 { font-family: MuseoSans-500;
font-weight: normal;
font-style: normal;
text-align:center;
font-size:25px !important;

color:orangered;

}

h2 { font-size:25px; font-family: MuseoSans-500 !important;
font-weight: normal;
font-style: normal;
clear:both; text-align:center; color: orangered;
}

.active {
background-color: #4CAF50;
color: white;
}

.topnav .icon {
display: none;
}

h2{margin-bottom:0px !important;}

img.content{
border:#01009C 1px solid; display: block; margin: 0 auto; vertical-align:middle !important; }

.topnav.responsive a {
float: none;
display: block;
text-align: center;
}
.container{background:white;}


.navbar-brand{height:150px;}
b{font-family: MuseoSans-500;color:orangered; padding-left:15px !important;}
.img-fluid {
max-width: 100%;
height: auto;
}

p{ padding-left: 15px;}

.Lrow {

}
p{
text-align:justify;}

HTML:

<body><div class="container">

<!-- Header Section-->
<br>

<div class="col-xs-3 col-md-2" style="padding:0px;">
<br>

</div>


<nav class="navbar navbar justify-content-center">
<div class="navbar-header">
<div class="navbar-brand">
<img class="img-fluid" src="/images/NTA-01.svg" width="150px">
<h1 class="navbar-text primary">Nederlandse Taal Aberdeen</h1>

</div>
</div>

</nav>
<div class="clearfix">&nbsp;</div>



</head>
<body>

<div class="topnav" id="myTopnav">
<a href="index.php<?php echo $link;?>"><?php echo $homepage;?></a>
<a href="ntc.php<?php echo $link;?>"><?php echo $NTC;?></a>
<a href="club.php<?php echo $link;?>"><?php echo $Club;?></a>
<a href="tuition.php<?php echo $link;?>"><?php echo $Tuition; ?></a>
<a href="team.php<?php echo $link;?>"><?php echo $Team; ?></a>
<a href="faq.php<?php echo $link;?>"><?php echo $Faq; ?></a>

<a href="contact.php<?php echo $link;?>"><?php echo $Contact; ?></a></li>
<a href="https://www.facebook.com/NederlandseTaalAberdeen/" target="_blank"> <i class="fa fa-facebook-square"> </i></a>

<!--a href="https://www.facebook.com/NederlandseTaalAberdeen/" target="_blank"> Facebook</a> -->
<a href="links.php<?php echo $link;?>"><?php echo $Links; ?></a></li>
<a href="<?php echo $languagelink;?>"><img class="flag" src="<?php echo $flagname; ?>"> </a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">

<i class="fa fa-bars"></i>
</a>
</div>

<!-- <div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Resize the browser window to see how it works.</p>
</div> -->

<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>

最佳答案

第一个解决方案:

<nav class="navbar navbar-expand-sm fixed-top">

<a class="navbar-brand" href="#">
Logo
</a>


<div class="collapse navbar-collapse" id="navbarsExample03">

<p class="w-100 text-center">Text</p>

<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>

</div>
</nav>

第二种方案:可以使用flex:

<div class="d-flex justify-content-between bg-secondary mb-3">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>

https://getbootstrap.com/docs/4.3/utilities/flex/请仔细阅读本文档。我想你会得到你想要的结果。

关于html - 如何在 Bootstrap 中的导航上方获取 Logo 和标题文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57499895/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com