gpt4 book ai didi

html - 自定义菜单包含语言和带有 Bootstrap 的菜单

转载 作者:行者123 更新时间:2023-11-28 03:41:28 25 4
gpt4 key购买 nike

我想使用 Twitter bootstrap 实现类似这样的 html 布局

我希望它在桌面和移动两种模式下都能响应,如下例所示

桌面模式

desktop

移动模式

MOBILE

这是我到目前为止尝试过的代码

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header >
<div id="navbar-main">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="/image/G2Xgp.png">
</a>
</div>
<div class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav navbar-right">
<li ><a href='#'>FR</a></li>
<li ><a href='#'>EN</a></li>
<li ><a href='#'>KR</a></li>
</ul>
</div>
<!--/.nav-collapse -->
<ul class="nav navbar-nav navbar-right">
<ul class="nav navbar-nav navbar-right" role="menu">
<li><a href='#' >HOME</a></li>
<li><a href='#' >ABOUT US</a></li>
<li><a href='#' >TEST</a></li>
<li><a href='#' >TEST</a></li>
<li><a href='#' >TEST</a></li>
<li><a href='#' >TEST</a></li>
</ul>
</ul>
</div>
</div>
</header>
</body>
</html>

感谢任何帮助

最佳答案

您似乎使用了 100% 的 Logo 尺寸。

执行此操作的最简单方法是将 css max-width 属性添加到 Logo 。例如:

.navbar-brand img{
max-width: 100px;
}

它将响应,因为 Logo 将被分配最大宽度属性,使 Logo 可拉伸(stretch)。

您可以根据您认为最适合您的设计来制作宽度。

关于html - 自定义菜单包含语言和带有 Bootstrap 的菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44195633/

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