gpt4 book ai didi

html - 在超小型设备中需要页面标题和切换按钮在同一行

转载 作者:行者123 更新时间:2023-11-28 01:18:50 28 4
gpt4 key购买 nike

我在顶部有一个引导导航栏,它有一个很长的标题和一个切换按钮,用于在小型设备中显示折叠的链接。 enter image description here

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

</head>
<body>

<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Yet Another Bootstrap Navigation </a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>


<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>


</html>

但在超小型设备中,按钮会下降,因为这个标题非常大。 enter image description here

有没有 Ant 方法让它们像以前的状态一样保持在同一条线上?

最佳答案

Try This CSS Code

.navbar-default .navbar-brand{padding-right: 70px;}
.navbar-default .navbar-toggle{position: absolute;right: 0;}

关于html - 在超小型设备中需要页面标题和切换按钮在同一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34562751/

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