Question

我遇到了最基本的Bootstrap（2.3.2）结构的问题，我似乎无法在一行中获得4x 3spans。第四个被压低了一个级别。添加响应式css文件的链接时，我得到相同的结果。我不能让他们在一条线上“适应”而不玩边缘，但我不应该/需要。非常感谢你的帮助！ ķ

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Bootstrap Index</title>
        <script type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>


    </head>
    <body><div class="container">
        <header>
            <div class="row">

                    <h2 class="span12">Portfolio</h2>

            </div>
        </header>
        <nav>

                <div class="row">
                    <div class="span12">
                        <div class="span3"><a href="indexREDO.html">Home</a></div>
                        <div class="span3"><a href="NewsREDO.html">News</a></div>
                        <div class="span3"><a href="GalleryREDO.html">Gallery</a></div>
                        <div class="span3"><a href="ContactREDO.html">Contact</a></div>
                    </div>
                </div>

        </nav>
        <section>

                <div class="row">
                    <div class="span12">
                        <img src="img/bridge.jpg" alt="..picture here.."/>
                    </div>

            </div>
        </section>
        <script type="text/javascript" src="js/jQuery.1.10.2.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <!-- Put your other scripts here -->
        <footer></footer>
    </div>
    </body>
</html>

Answer 1

删除<div class="span12" />元素，让.span3自己驻留在行内。

<div class="row">
    <div class="span3"><a href="indexREDO.html">Home</a></div>
    <div class="span3"><a href="NewsREDO.html">News</a></div>
    <div class="span3"><a href="GalleryREDO.html">Gallery</a></div>
    <div class="span3"><a href="ContactREDO.html">Contact</a></div>
</div>

或者，您可以在范围内嵌套新行。行类重置填充/边距，以便您可以利用它所嵌入的跨度的整个宽度。

<div class="row">
    <div class="span12">
        <div class="row">
            <div class="span3"><a href="indexREDO.html">Home</a></div>
            <div class="span3"><a href="NewsREDO.html">News</a></div>
            <div class="span3"><a href="GalleryREDO.html">Gallery</a></div>
            <div class="span3"><a href="ContactREDO.html">Contact</a></div>
        </div>
    </div>
</div>

无法在一行中获得正确的跨距数

1 个答案: