左侧div在自举中没有正确对齐 [英] Left side div is not aligning properly in bootstrap
本文介绍了左侧div在自举中没有正确对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的代码中已经粘住了标题。我想在左侧添加一个更粘的div。最初它看起来很好。当我尝试滚动内容时，布局正在改变。同样在最小尺寸（手机尺寸）左侧格没有正确对齐。请建议。
var onResize = function（）{$（body ）.css（padding-top，$（。navbar-fixed-top）。height（））;}; $（window）.resize（onResize）; $（function（）{onResize（）;}）; $（document）.ready（function（）{$（'body'）。scrollspy（{target：'#mainNavbar' ，offset：10}）;}）; < body {height：100％;} body {padding-top：50px; } .navbar-nav {float：left; margin：0;} .navbar-nav> li {float：left;}。navbar-nav> li> a {padding-top：15px;我们可以通过下面的例子来说明如何使用它：{} class =snippet-code-html lang-html prettyprint-override> <！DOCTYPE html>< html>< head> < title>引导程序示例< / title> < meta charset =utf-8> < meta name =viewportcontent =width = device-width，initial-scale = 1> < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css> < script src =https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js>< / script> < script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js>< / script> < /头><身体GT; < nav class =navbar navbar-default navbar-fixed-top navbar-offset> < div style =font-size：30px; margin-left：30px;>标题和标志在这里< / div> < / NAV> < div class =container> < div class =row> < div class =col-lg-4 col-sm-4 col-md-4style =background-color：grey; data-spy =affixdata-offset-top =0> < div style =height：280px; background-color：lightblue; margin-top：20px;>< / div>< br /> < div id =mainNavbar> < UL> < li class =active>< a href =＃divDesert>沙漠< / a>< / li> < li>< a href =＃divLighthouse>灯塔< / a>< / li> < li>< a href =＃divTulips>郁金香< / a>< / li> < li class =dropdown> < a href =＃class =dropdown-toggledata-toggle =dropdown>动物< span class =caret>< / span> < / A> < ul class =dropdown-menu> < li>< a href =＃divJellyfish>水母< / a>< / li> < li>< a href =＃divPenguins>企鹅< / a>< / li> < / UL> < /锂> < / UL> < / DIV> < / DIV> < div class =col-lg-8 col-sm-8 col-md-8style =background-color：lightblue; font-size：30px;> < div id =divDesert> < H1>沙漠< / H1> < p> Affix插件允许元素粘贴（锁定）到页面上的某个区域。< / p> < / DIV> < div id =divLighthouse> < H1>灯塔< / H1> < p> Lorem ipsum dolor sit amet，consectetuer adipiscing elit。< / p> < / DIV> < div id =divTulips> < H1>郁金香< / H1> < p>如果您的搜索结果存在错误，请点击此处查看您的广告。< / p> < / DIV> < div id =divJellyfish> < H1>水母< / H1> < p>但我必须向您解释这些错误的谴责想法。< / p> < / DIV> < div id =divPenguins> < H1>企鹅< / H1> < p> Li Europan lingues es membres del sam familie。< / p> < / DIV> < / DIV> < / DIV> < / div>< / body>< / html>
当你的左边栏获取 position：fixed 时，它将从页面流中取出，这意味着主要内容会移动取代它的地位。
解决这个问题的方法是在滚动时为主要内容添加一个边距。保证金应该等于边栏占用的空间量（33.333％）。
你没有用jQuery标记你的问题，但如果你打开这是一个可能的方法。您可能需要使用媒体查询调整数字。
var onResize = function （）{$（body）。css（padding-top，$（。navbar-fixed-top）。height（））;}; $（window）.resize（onResize）; $（function （）{（onResize（）;}）; $（document）.ready（function（）{$（'body'）。scrollspy（{target：'#mainNavbar'，offset：10}）; $（window ）.scroll（function（）{var scroll = $（window）.scrollTop（）; if（scroll> 0）{$（＃content）。addClass（fix）;} else {$（＃内容）。removeClass（fix）;}}）;
html，body {height：100％;} body {padding-top：50px;}。navbar-nav {float：left; margin：0;}。navbar-nav> li {float：left;}。navbar-nav> li> a {padding-top：15px; padding-bottom：15px;}。navbar-offset {top：0px;}。container {background：#ccc;}。affix {top：20;}＃content.fix {margin-left：33.333333％;} <！DOCTYPE html>< html>< head>< p>< < title>引导程序示例< / title> < meta charset =utf-8> < meta name =viewportcontent =width = device-width，initial-scale = 1> < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css> < script src =https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js>< / script> < script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js>< / script>< / head>< body> < nav class =navbar navbar-default navbar-fixed-top navbar-offset> < div style =font-size：30px; margin-left：30px;>标题和标志在这里< / div> < / NAV> < div class =container> < div class =row> < div class =col-lg-4 col-sm-4 col-md-4style =background-color：grey; data-spy =affixdata-offset-top =0> < div style =height：280px; background-color：lightblue; margin-top：20px;>< / div>< br /> < div id =mainNavbar> < UL> < li class =active>< a href =＃divDesert>沙漠< / a>< / li> < li>< a href =＃divLighthouse>灯塔< / a>< / li> < li>< a href =＃divTulips>郁金香< / a>< / li> < li class =dropdown> < a href =＃class =dropdown-toggledata-toggle =dropdown>动物< span class =caret>< / span> < / A> < ul class =dropdown-menu> < li>< a href =＃divJellyfish>水母< / a>< / li> < li>< a href =＃divPenguins>企鹅< / a>< / li> < / UL> < /锂> < / UL> < / DIV> < / DIV> < div class =col-lg-8 col-sm-8 col-md-8id =contentstyle =background-color：lightblue; font-size：30px;> < div id =divDesert> < H1>沙漠< / H1> < p> Affix插件允许元素粘贴（锁定）到页面上的某个区域。< / p> < / DIV> < div id =divLighthouse> < H1>灯塔< / H1> < p> Lorem ipsum dolor sit amet，consectetuer adipiscing elit。< / p> < / DIV> < div id =divTulips> < H1>郁金香< / H1> < p>如果您的搜索结果存在错误，请点击此处查看您的广告。< / p> < / DIV> < div id =divJellyfish> < H1>水母< / H1> < p>但我必须向您解释这些错误的谴责想法。< / p> < / DIV> < div id =divPenguins> < H1>企鹅< / H1> < p> Li Europan lingues es membres del sam familie。< / p> < / DIV> < / DIV> < / DIV> < / div>< / body>< / html>
I have already sticky header in my code. And I am trying to add one more sticky div in the left side. Initially it is looking fine. When I try to scroll the content, layout is changing. Also at minimum size (mobile size) left side div is not aligning properly. Please suggest.
var onResize = function() {
$("body").css("padding-top", $(".navbar-fixed-top").height());
};
$(window).resize(onResize);
$(function() {
onResize();
});
$(document).ready(function () {
$('body').scrollspy({
target: '#mainNavbar',
offset: 10
});
});
html, body {
height: 100%;
}
body {
padding-top: 50px;
}
.navbar-nav {
float: left;
margin: 0;
}
.navbar-nav>li {
float: left;
}
.navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
}
.navbar-offset {
top: 0px;
}
.container {
background: #ccc;
}
.affix {
top: 20;
}
<!DOCTYPE html>
<html>
<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.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top navbar-offset">
<div style="font-size:30px;margin-left:30px;">Title and logo here</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-4 col-md-4" style="background-color:gray;" data-spy="affix" data-offset-top="0">
<div style="height:280px;background-color:lightblue;margin-top:20px;"></div><br/>
<div id="mainNavbar">
<ul>
<li class="active"><a href="#divDesert">Desert</a></li>
<li><a href="#divLighthouse">Lighthouse</a></li>
<li><a href="#divTulips">Tulips</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Animals <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#divJellyfish">Jellyfish</a></li>
<li><a href="#divPenguins">Penguins</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-lg-8 col-sm-8 col-md-8" style="background-color:lightblue;font-size:30px;">
<div id="divDesert">
<h1>Desert</h1>
<p>The Affix plugin allows an element to become affixed (locked) to an area on the page.</p>
</div>
<div id="divLighthouse">
<h1>Lighthouse</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div id="divTulips">
<h1>Tulips</h1>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
</div>
<div id="divJellyfish">
<h1>Jellyfish</h1>
<p>But I must explain to you how all this mistaken idea of denouncing.</p>
</div>
<div id="divPenguins">
<h1>Penguins</h1>
<p>Li Europan lingues es membres del sam familie.</p>
</div>
</div>
</div>
</div>
</body>
</html>
解决方案
When your left sidebar gets position: fixed it is taken out of the flow of the page, which means the main content moves over to take its place.
A way to solve this is by adding a margin to the main content when you scroll. The margin should be equal to the amount of space occupied by the sidebar (33.333%).
You haven't tagged your question with jQuery, but if you are open to it here is a possible approach. You may have to tweak the numbers using media queries.
var onResize = function() {
$("body").css("padding-top", $(".navbar-fixed-top").height());
};
$(window).resize(onResize);
$(function() {
onResize();
});
$(document).ready(function() {
$('body').scrollspy({
target: '#mainNavbar',
offset: 10
});
});
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 0) {
$("#content").addClass("fix");
} else {
$("#content").removeClass("fix");
}
});
html,
body {
height: 100%;
}
body {
padding-top: 50px;
}
.navbar-nav {
float: left;
margin: 0;
}
.navbar-nav>li {
float: left;
}
.navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
}
.navbar-offset {
top: 0px;
}
.container {
background: #ccc;
}
.affix {
top: 20;
}
#content.fix {
margin-left: 33.333333%;
}
<!DOCTYPE html>
<html>
<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.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top navbar-offset">
<div style="font-size:30px;margin-left:30px;">Title and logo here</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-4 col-md-4" style="background-color:gray;" data-spy="affix" data-offset-top="0">
<div style="height:280px;background-color:lightblue;margin-top:20px;"></div><br/>
<div id="mainNavbar">
<ul>
<li class="active"><a href="#divDesert">Desert</a></li>
<li><a href="#divLighthouse">Lighthouse</a></li>
<li><a href="#divTulips">Tulips</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Animals <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#divJellyfish">Jellyfish</a></li>
<li><a href="#divPenguins">Penguins</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-lg-8 col-sm-8 col-md-8" id="content" style="background-color:lightblue;font-size:30px;">
<div id="divDesert">
<h1>Desert</h1>
<p>The Affix plugin allows an element to become affixed (locked) to an area on the page.</p>
</div>
<div id="divLighthouse">
<h1>Lighthouse</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div id="divTulips">
<h1>Tulips</h1>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
</div>
<div id="divJellyfish">
<h1>Jellyfish</h1>
<p>But I must explain to you how all this mistaken idea of denouncing.</p>
</div>
<div id="divPenguins">
<h1>Penguins</h1>
<p>Li Europan lingues es membres del sam familie.</p>
</div>
</div>
</div>
</div>
</body>
</html>
这篇关于左侧div在自举中没有正确对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
