Div 重叠 Bootstrap 列
Div overlapping Bootstrap Column
我刚开始使用 Bootstrap。用它从头开始构建我自己的页面。
我遇到的问题是 div 溢出 bootstrap 容器。
我不知道我是否设计得很好，我应该使用多少列，或者在某些情况下使用列而不是 div，我真的不明白罚款在列内添加纯 html 和是否需要嵌套 Bootstrap 列之间的界线，或者我是否在列和行上走得太远，或者我没有足够的......尝试明白这一点。因为我可以在一个专栏中放很多东西，但有人想那样做，可能不会，我正在尝试理解为什么或为什么不这样做。
很明显这不是完全响应。
无论如何，这是我的代码，以及显示溢出的图像。
<!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>
在我看来，您对专栏的处理有点过头了。我无法在 Firefox 上重现您的特定问题，但我确实看到了其他布局问题。大多数问题是由不同大小的色谱柱的大量混合引起的。在每个 row 中，您的目标应该是确保每个尺寸的 col-* 组合加起来达到 12。对于每个大小级别，您都有大量不同的值，而实际上您可以通过仅定义所需的大小来简化它。
我创建了一个 Bootply，可以大大简化您的代码。我没有为每个单个大小断点定义大小，而是只使用 col-sm 大小。这意味着它将使用您定义的大小，直到达到 'small' 大小，此时它将变为全宽。您会发现从这种简单的方法入手并仅在需要时才覆盖更多的列大小要简单得多。
http://www.bootply.com/c8VpkBzHiI#
这绝不是一篇完结的文章。我弄乱了你的标题部分并将其变成了 Bootstrap 媒体 object，但它没有响应，但这对你来说可能是一个挑战！
我希望这能帮助您回到正确的方向，如果您能告诉我们您在哪个浏览器中遇到文本溢出问题，以及我的代码是否仍然出现这种情况，那将会很有帮助。
我刚开始使用 Bootstrap。用它从头开始构建我自己的页面。
我遇到的问题是 div 溢出 bootstrap 容器。
我不知道我是否设计得很好，我应该使用多少列，或者在某些情况下使用列而不是 div，我真的不明白罚款在列内添加纯 html 和是否需要嵌套 Bootstrap 列之间的界线，或者我是否在列和行上走得太远，或者我没有足够的......尝试明白这一点。因为我可以在一个专栏中放很多东西，但有人想那样做，可能不会，我正在尝试理解为什么或为什么不这样做。
很明显这不是完全响应。
无论如何，这是我的代码，以及显示溢出的图像。
<!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>
在我看来，您对专栏的处理有点过头了。我无法在 Firefox 上重现您的特定问题，但我确实看到了其他布局问题。大多数问题是由不同大小的色谱柱的大量混合引起的。在每个 row 中，您的目标应该是确保每个尺寸的 col-* 组合加起来达到 12。对于每个大小级别，您都有大量不同的值，而实际上您可以通过仅定义所需的大小来简化它。
我创建了一个 Bootply，可以大大简化您的代码。我没有为每个单个大小断点定义大小，而是只使用 col-sm 大小。这意味着它将使用您定义的大小，直到达到 'small' 大小，此时它将变为全宽。您会发现从这种简单的方法入手并仅在需要时才覆盖更多的列大小要简单得多。
http://www.bootply.com/c8VpkBzHiI#
这绝不是一篇完结的文章。我弄乱了你的标题部分并将其变成了 Bootstrap 媒体 object，但它没有响应，但这对你来说可能是一个挑战！
我希望这能帮助您回到正确的方向，如果您能告诉我们您在哪个浏览器中遇到文本溢出问题，以及我的代码是否仍然出现这种情况，那将会很有帮助。