Bootstrap定位问题

时间:2013-01-28 22:18:44

标签: html css twitter-bootstrap

我使用Dreamweaver和表创建了这个网站(http://aghicks.co.uk/),我现在正在学习Bootstrap。我有一些我无法理解的事情。

到目前为止,我有这个

<!DOCTYPE html>
<html lang="en">
<head>

    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="css/stylesheet.css" rel"stylesheet" type="text/css">
    <style type="text/css">
    body {
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        max-width: 1000px;
        border: 1px solid black;
        background:#EAEAEA;
        margin: auto;
        padding-top: 66px;
    }

    .redtext {
        color: #b83535;
    }

    a {
        color: #333;
    }

    a:hover {
        color: #b83535;
        text-decoration: none;
    }

    .align_right {
        text-align: right;
    }

    .logo {
        min-width: 286px;
    }

    span {
        font-weight: 300;
    }

    .navbar {
        padding-top: 34px;
    }

    .centered {
        float: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    h4 {
        font-size: 16px;
    }

    /* Homepage */

    /* Footer */

    .footer_wrapper {
        max-height: 70px;
    }

    .footer {
        background-color: #999999;
    }

    .footer_text {
        color: #FFF;
        font-size: 10px;
        padding-top: 8px;
        padding-left: 8px;
        padding-right: 8px;
    }
</style>
    <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>
</head>
<body>

<div class="container-fluid">

<!-- Header -->
    <div class="row-fluid">
        <div class="span5 logo">
            <img src="images/Logo.png" class="logo">
        </div>
        <div class="span4 offset3">
                    <img src="images/Phone_icon.png" class="pull-left">
                    <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><a href="http://www.google.com">Home</a></li>
                            <li><a href="http://www.google.com">Gallery</a></li>
                            <li><a href="http://www.google.com">About Us</a></li>
                            <li><a href="http://www.google.com">Contact</a></li>
                        </ul>
                    </div>
                </div>
            </div>
    </div>

    <!-- Content -->
    <div class="row-fluid">
        <div class="span6">
            <img src="images/Homepage/Small_one_off_jobs.png" >
        </div>
        <div class="span6">
            <div class="row-fluid">
                <div class="span12">
                    <h5>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">
                    <img src="images/Homepage/Map_pin.png" >
                    <h5 class="redtext">Northampton Based</h5>
                    <img src="images/Homepage/Quote.png" >
                    <h5 class="redtext">Free Quotes</h5>
                    <img src="images/Homepage/Tools.png" >
                    <h5 class="redtext">No Job Too Small</h5>
                    <img src="images/Homepage/Piggybank.png" >
                    <h5 class="redtext">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">
            <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>
</body>
</html>

我可以看到的问题出现在这些图片http://imgur.com/jdSAKEk,CbbVrv7#0

(将移除正文周围的边框并更改导航栏的样式)

在第一张图片(桌面尺寸)中,您会看到电话号码图标在实际数字旁边没有排列,图标和文字都没有与徽标底部对齐。我可以通过使用填充来实现这一点,但是当你减小浏览器的宽度时,填充仍然存在,并在页面中造成巨大的空白。

第一张照片中的第二个问题是,我无法将中间右侧区域的图标和红色文字显示在www.aghicks.co.uk目前的“网格”形式中。

最后,在第二张图片上,当浏览器宽度减小时,当有足够的空间时,两个列表会相互对齐。

对任何问题的任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:0)

  • 您想如何调整巨大的手机图标以及2行文字和数字?首先在桌面上,然后在平板电脑上?
  • 垂直对齐是display: table-something; vertical-align: bottom;的作业。
  • 网格形成:我带有4个项目的列表,项目将是固定宽度(50%或49%),显示为inline-block(或浮动到.clearfix容器中)。
  • 第二张图片并没有并排列出:那么,哪个CSS应用于此宽度?将规则检入相关媒体查询。也许它们显示为内联块,宽度为50%?然后,仍然有大约的空白。 4PX。宽度为45%会自动解决问题(不要忘记添加.clearfix容器,否则内容会泄漏到剩余的(10%-4px)左侧空间......)