Question

我刚刚开始使用Bootstrap。用它从头开始构建我自己的页面。

我遇到的问题是div溢出了一个bootstrap容器。

我不知道我是在设计好这个列我应该使用多少列，或者在某些情况下使用列而不是div，我还不太了解细线在列内添加普通html之间，如果我需要嵌套的Bootstrap列，或者我是否已经过分或不使用列和行，或者我没有足够的...试图理解这一点。因为我可以在一栏中放一吨，但是有人想做到这一点，可能不会，我试图理解为什么或为什么不这样做。

很明显，这并没有完全响应。

无论如何这里是我的代码，以及显示溢出的图像。

Full Screen

Shrunk Browser

<!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>

Answer 1

在我看来，你对这些专栏有点过分了。我无法在Firefox上重现您的特定问题，但我确实看到了其他布局问题。大多数问题都是由于您对不同色谱柱尺寸的混合造成的。在每个row中，您应该确保col-*组合在每个尺寸上加起来为12。每个尺寸级别都有大量不同的值，而实际上只需定义所需的尺寸就可以使它变得更简单。

我创建了一个Bootply，可以简化你的代码。我没有为每个单一大小的断点定义大小，而只使用col-sm大小。这意味着它将使用您定义的大小，直到它达到“小”的大小。大小，此时它会破碎到全宽。您会发现从这种简单方法开始，只需在需要时覆盖更多列大小就更简单了。

http://www.bootply.com/c8VpkBzHiI#

这绝不是一篇完整的文章。我已经搞乱了你的标题部分并把它变成了一个Bootstrap媒体对象，但它并没有响应，但这对你来说是一个挑战！

我希望这有助于让您回到正确的方向，并且如果您可以告诉我们哪个浏览器您在使用溢出的文本时遇到问题，以及是否仍然会出现我的代码会对您有所帮助。

Div重叠Bootstrap列

1 个答案: