-1

我正在使用响应式功能使用最新的 Twitter Bootstrap 构建一个站点。

我的问题是我有两个并排显示的列表,但是当视口宽度小于 768px 宽时,尽管有足够的空间容纳它们,但它们看起来是堆叠的。我怎样才能解决这个问题?

另外,还有一些小事情:在页脚中,版权符号之前出现了一个奇怪的 A 符号……我该如何解决?此外,在 IE 中,两个元素不会像在所有其他浏览器上那样显示为内联。

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AGHicks Homepage</title>
    <link href="css/stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>

<div class="container-fluid">

<!-- Header -->
    <div class="row-fluid">
        <div class="span5 logo">
            <a href="index.html"><img src="images/Logo.png" class="logo"></a>
        </div>
        <div class="span4 offset3 phone_numbers">
                    <img src="images/Phone_icon.png" class="pull-left phone_icon hidden-phone hidden-tablet">
                    <h4 class="pull-right align_right">Northampton <span>01604786464</span><br><br>Mobile <span>07710537685</span></h4>
        </div>
    </div>

    <!-- Navbar -->
    <div class="navbar">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li class="navbar_link navitem1"><a href="index.html"><strong>HOME</strong></a></li>
                            <li class="divider-vertical navitem2"></li>
                            <li class="navbar_link navitem3"><a href="http://www.google.com"><strong>GALLERY</strong></a></li>
                            <li class="divider-vertical navitem4"></li>
                            <li class="navbar_link navitem5"><a href="http://www.google.com"><strong>ABOUT US</strong></a></li>
                            <li class="divider-vertical navitem6"></li>
                            <li class="navbar_link navitem7"><a href="http://www.google.com"><strong>CONTACT</strong></a></li>
                        </ul>
                    </div>
                </div>
            </div>
    </div>

    <!-- Content -->
    <div class="row-fluid content">
        <div class="span6">
            <div id="homepage_carousel" class="carousel slide">
                <div class="carousel-inner">
                    <div class="active item"><img src="images/Homepage/640x480px-City-&-Guilds.png" /></div>
                    <div class="item"><img src="images/Homepage/640x480px-Domestic-&-Commercial.png" /></div>
                    <div class="item"><img src="images/Homepage/640x480px-Small-One-Off-Jobs.png" /></div>
                </div>
             </div>
        </div>
        <div class="span6">
            <div class="row-fluid homepage_text">
                <div class="span12">
                    <h5 class="text_justify">Welcome to AGHicks Building Services website! We are a Northampton based, family run company with over 20 years experience. Hardwork, efficiency and reliability are instilled throughout the workforce and we have gained a strong reputation through word of mouth.</h5>
                </div>
            </div>
            <div class"row-fluid">
                <div class="span12 icon_container">
                    <img src="images/Homepage/Map_pin.png" class="grid_item grid_item1" >
                    <h5 class="redtext grid_item grid_text">Northampton Based</h5>
                    <img src="images/Homepage/Quote.png" class="grid_item grid_item2" >
                    <h5 class="redtext grid_item grid_text">Free Quotes</h5>
                </div>
                <div class="span12 icon_container2">
                    <img src="images/Homepage/Tools.png" class="grid_item grid_item3" >
                    <h5 class="redtext grid_item grid_text">No Job Too Small</h5>
                    <img src="images/Homepage/Piggybank.png" class="grid_item grid_item4" >
                    <h5 class="redtext grid_item grid_text">Competitive Prices</h5>
                </div>                    
            </div>
            <div class="row-fluid">
                <div class="span12">
                    <h5 class="redtext centered">OUR SERVICES INCLUDE</h5>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span5">
                    <ul>
                        <li><strong>Conservatories</strong></li>
                        <li><strong>Extensions</strong></li>
                        <li><strong>Window & Door Refits</strong></li>
                        <li><strong>Bricklaying</strong></li>
                        <li><strong>Driveways</strong></li>
                        <li><strong>Carpentry</strong></li>
                        <li><strong>Patios</strong></li>
                        <li><strong>Stonework</strong></li>
                    </ul>
                </div>
                <div class="span6 offset1 lists">
                    <ul>
                        <li><strong>Plastering</strong></li>
                        <li><strong>Kitchen & Bathroom Refits</strong></li>
                        <li><strong>Tiling</strong></li>
                        <li><strong>Fencing</strong></li>
                        <li><strong>Fascias</strong></li>
                        <li><strong>Garages & Carports</strong></li>
                        <li><strong>Guttering</strong></li>
                    </ul>
                </div>  
            </div> 
   </div>

   <!-- Footer -->
   <div class="row-fluid footer_wrapper">
        <div class="span12">
            <div class="row-fluid footer">
            <div class="span5">
                <p class="footer_text"><strong>Copyright © AGHicks Building Services 2012 - All rights reserved.<br>Registered Address - 19 Bentley Close, Rectory Farm, Northampton, NN3 5JS.</strong></p>
            </div>
            <div class="span4 offset3 align_right">
                <p class="footer_text"><strong>Web Design Services and SEO from <a href="http://www.benmil.tumblr.com/me">Ben Mildren</a></strong></p>
            </div>
            </div>
        </div>

   </div>     
</div>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
       $('.carousel').carousel({
           interval: 3500
        })
    </script>
</body>

CSS 在这里: http: //gw.gd/Ooky

提前致谢。

4

1 回答 1

0

正如@Omega 所指出的,<768px 的列堆叠是默认的引导行为。不过,您可以使用一些自定义 CSS 覆盖它。这里有一个类似问题的帖子:Stack elements in twitter bootstrap media grid different

关于页脚中的奇怪符号,首先检查您的页眉是否包括:

<meta charset="UTF-8">

祝你好运!

于 2013-02-10T00:03:26.740 回答