Div重叠引导柱
Div重叠引导柱
提问于 2015-05-08 06:48:35
我才刚开始用鞋带。用它从头开始构建我自己的网页。
我遇到的问题是一个div溢出了一个引导容器。
在某些情况下，我不知道我应该使用或使用多少列，而不是div，我不知道我是否正在很好地设计这个列，我并不真正理解在列中添加普通html和需要嵌套的引导列之间的细行，或者我是否对列和行过度使用，或者如果我没有enough...trying来理解它。因为我可以把一堆东西放在一个专栏里，但是一个人想要这样做，可能不想，而且我正在试图理解为什么或者为什么不。
因此，这显然没有得到充分的响应。
不管怎样，这是我的代码，还有一个显示溢出的图像。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>A Title</title>
<link href="../../../content/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../../../content/bootstrap/css/sticky-footer.css" rel="stylesheet">
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="../../../content/bootstrap/js/html5shiv.min.js"></script>
<script src="../../../content/bootstrap/js/respond.min.js"></script>
<![endif]-->
<style>
body
{
margin: 0;
padding: 0;
}
.nopadding
{
padding: 0 !important;
}
.padding-top-bottom-5
{
/* when to use important in bootstrap? */
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.padding-left-5
{
padding-left: 5px !important;
}
.float-left{float: left;}
.margin-5 { margin: 5px;}
.margin-right-10 {margin-right: 10px;}
.margin-2
{
margin: 2px !important;
}
.margin-left-5
{
margin: 2px !important;
}
p {
font-size: 1em;
line-height: 1.25em;
text-align: justify;
word-wrap: break-word;
}
.italic
{
font-style: italic;
}
.font-xsmall
{
font-size: 13px;
}
.bold
{
font-weight: bold;
}
#castMetaList li
{
display: inline;
list-style-type: none;
padding-right: 10px;
}
.vtop
{
vertical-align: top;
float: left;
}
.inline-block
{
display: inline-block;
}
.show-Details
{
float: right;
}
.cast-description
{
margin: 10px 0px 0px 0px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header"><img src="../../../Images/fullLogo_noBackground.png" />
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Dashboard</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-sm-12 well">
<div id="navbar2" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
<li><a href="#">Donate!</a></li>
<li><a href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</div>
</div>
<div class="container-fluid well">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar well">
Getting Around
<ul class="nav nav-sidebar well">
<li class=" "><a href="#">Authors <span class="sr-only">(current)</span></a></li>
<li><a href="#">Recent shows</a></li>
<li><a href="#">Popular shiows</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<div class="col-lg-9 well">
<div class="row">
<div class="col-sm-4 col-md-9 col-lg-12 well margin-2 padding-top-bottom-5">
<div class="row">
<div class="col-xsm-4 col-sm-6 col-md-9 col-lg-12 well padding-top-bottom-5">
<img src="../../../Images/CastThumbs/episode206.jpg" class="vtop margin-right-10" />
<div class="show-Details">
<span class="bold">The Title</span>
<p class="cast-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor.
</p>
</div>
</div>
<div class="col-xsm-4 col-sm-6 col-md-9 col-lg-12 well padding-top-bottom-5">
<p>
<ul class="list-unstyled" id="castMetaList">
<li>2/17/2015</li>
<li>Author: Some Dude</li>
</ul>
</p>
</div>
<div class="col-xsm-4 col-sm-6 col-md-9 col-lg-12 well padding-top-bottom-5">
More details about this episode
</div>
<div class="col-xsm-4 col-sm-6 col-md-9 col-lg-12 well padding-top-bottom-5">
Watch this episode
</div>
<div class="col-xsm-4 col-sm-6 col-md-9 col-lg-12 well padding-top-bottom-5">
<img src="../../../Content/Bootstrap/fake_ad.jpg" width="468" height="60" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<h1>Footer</h1>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2015-05-08 11:44:27
在我看来，你的专栏有点过火了。我无法在Firefox上复制您的特定问题，但我确实看到了其他布局问题。大多数问题都是由于你大量混合不同的栏目尺寸造成的。在每个row中，您的目标应该是确保您的col-*组合在每个大小上加为12。对于每个大小级别，您都有大量不同的值，而实际上您只需要定义所需的大小就可以使其变得更简单。
我已经创建了一个Bootply，它简化了您的代码。我只使用col-sm大小，而不是为每个大小断点定义大小。这意味着它将使用您定义的大小，直到它到达“小”大小，此时它将断开到完全宽度。您会发现，从这种简单的方法开始，只在需要时覆盖更多的列大小要简单得多。
http://www.bootply.com/c8VpkBzHiI#
这绝不是一篇文章。我已经混乱了你的标题部分，并把它变成一个引导媒体对象，但它没有作出反应，但这可能是一个挑战，你要修复！
我希望这有助于您回到正确的方向，如果您能够告诉我们，您遇到了哪些浏览器的问题，溢出的文本，以及它是否仍然发生在我的代码，这将是有帮助的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30117478
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号