gpt4 book ai didi

jquery - Bootstrap Grid 和 HTML 元素对齐

转载 作者:太空宇宙 更新时间:2023-11-04 14:15:50 25 4
gpt4 key购买 nike

我有一个固定的静态顶部导航栏,然后我有另一个左侧导航栏。我试图用文本填充页面的其余部分,但似乎顶部导航栏和左侧导航栏隐藏了它。我试过将整个页面放在一个容器类中,然后将顶部导航栏放在一行中,将左侧导航栏放在另一行中,然后每行都有 span6,因此左侧导航栏旁边的另一列将是我的文本, 但这仍然无效。

  <!DOCTYPE html>
<html>
<head>
<title>Tester</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<style>
.dropdown-menu {
background-image: url('http://127.0.0.1:3000/img/navbar_bg.jpg') !important;
background-size: 100% !important;
}
.navbar-fixed-top {
-webkit-box-shadow: 5px 5px 5px #8E8884;
-moz-box-shadow: 5px 5px 5px #8E8884;
box-shadow: 5px 5px 5px #8E8884;
margin-bottom: 0 !important;
background-image: url('http://127.0.0.1:3000/img/navbar_bg.jpg') !important;
background-size: 100% !important;
color: white
}
body {
background-color: rgb(214, 215, 219) !important;
}

.carousel-inner>img {
height: 550px !important;
width: 900px !important;
}

.carousel-control.left,.carousel-control.right {
background-image: none !important;
}

.carousel-inner>.item>img {
margin: 0 auto;
}

.navbar-nav>li>a {
font-size: 20px;
font-size: 1.3rem;
font-weight: bold;
text-shadow: 0 -2px 0 rgba(0, 0, 0, 0.38);
color: white !important;
}

.dropdown-menu>li>a {
font-size: 20px;
font-size: 1.2rem;
font-weight: bold;
text-shadow: 0 -2px 0 rgba(0, 0, 0, 0.38);
color: white !important;
}

.left_navbar {
border-right: white;
margin-top: 75px;
margin-left: 5px;
width: auto;
display: inline-block;
-webkit-box-shadow: 3px 3px 3px #8E8884;
-moz-box-shadow: 3px 3px 3px #8E8884;
box-shadow: 3px 3px 3px #8E8884;
background-color: white;
overflow: scroll;
overflow-x: hidden;
position: absolute;
top: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<div class="navbar navbar-default navbar-inner navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="" width="30%" height="30%"></a>
</div>

<!-- Right Help section -->
<ul class="nav navbar-nav pull-right">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Help <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">About</a></li>
</ul>
</li>
</ul>
</div>
</ul> <!-- End of Right Help section -->
</div>
</div>
</div>

<ul class="nav nav-pills nav-stacked left_navbar">

<li><a href="#">Email</a></li>

<li><a href="#">System Username</a></li>

<li><a href="#">Database Profile</a></li>

<li><a href="#">System Password</a></li>

<li><a href="#">location</a></li>

<li><a href="#">xxxxxxxxx</a></li>

<li><a href="#">Integration</a></li>

<li><a href="#">Is sdsadsa Server</a></li>

<li><a href="#">lalalalalalal</a></li>

<li><a href="#">sdaaaaaaaaaaaaaaaaaaaaaaa</a></li>

<li><a href="#">weweaweaeweawewaewaewaeawewa</a></li>

<li><a href="#">aaa</a></li>

<li><a href="#">bbbbbbb</a></li>

<li><a href="#">aaaaaaaaa</a></li>

<li><a href="#">xzczzxcxzczxcz</a></li>

</ul>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</body>
</html>

最佳答案

它是 bootstrap 3.x 版本,所以 span6 不再需要使用 col-md-6 等...阅读文档。这是您更新后的工作代码

JSBIN

关于jquery - Bootstrap Grid 和 HTML 元素对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20370448/

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