Question

enter image description here 我最近在一个带有bootstrap的网站上工作，由于某种原因，我设置的网格并不完全正常工作。基本上我有一个网站，有2列，一列有4个网格空间，另外8个空格。一旦页面大小达到移动状态，我的8格网图片的宽度就会搞定。这是代码

<!DOCTYPE HTML>
<!-- Website Template by freewebsitetemplates.com -->
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    <title>Contact</title>
    <link rel="stylesheet" href="css/contact.css" type="text/css">

            <link rel="stylesheet" href="bootstrap/css/bootstrap.css">

            <style>

            .header{
            padding:0;}




            .leftcol{

                width:100%;
                height:800px;

                    }

            .rightcol{
                width:112.3%;
                height:800px;
                }

            .text{
                color:black;
                position:absolute;
                top:10%;
                left:35%;
            }

            .contact_image{
                width:50%;
                position:absolute;
                top:70%;
                left:27%;
            }

            </style>
</head>


<body>
<div class="container">


<header class="row">

<div class="header col-lg-10 col-md-10 col-sm-10 col-xs-12">
<img  id="papa" src="newImages/papaupdated.png">
</div>


<div class="col-lg-2 col-md-2 col-sm-2 hidden-xs">
<img src="newImages/remaxlogo.jpg">


</div>

</header>

<div class=" navigation navbar navbar-default row">
<ul class="nav navbar-nav">
                <li>
                    <a href="index.php">home</a>
                </li>
                <li>
                    <a href="opportunities.php">Opportunities</a>
                </li>
                <li>
                    <a href="propertymanagement.php">Property Management</a>
                </li>
                <li>
                    <a href="aboutjay.php">About Jay</a>
                </li>
                <li>
                    <a href="community.php">Community</a>
                </li>
                <li class="selected">
                    <a href="contact.php">Contact</a>
                </li>

            </ul>
</div>

<div class=" row col-lg-4 col-md-4 col-sm-4 hidden-xs" >
<img class="row leftcol" src="newImages/leftsidebackground.jpg">
</div>



<div class="  row col-lg-8 col-md-8 col-sm-8 col-xs-12">
    <img class="rightcol row" src="images/greyimage.jpg">

         <div class="text col-lg-12">
          <p> Email me at <a href="mailto:jay@jaycousins.com">jay@jaycousins.com</a></p>
                    <p>(250) 751-1223 Office</p>
                    <p>(250) 751-1300 Fax</p>
                    <p><span style="color:red;">RE/MAX</span> Jay Cousins Realty</p>
                    <p>#1-5140 Metral Drive</p>
                    <p >Nanaimo B.C. Canada</p>
                    <p >(250) 751-1223 Bus.</p>
                    <p>(250) 751-1300 Fax.</p>
                    <p >"Each Office Independently Owned & Operated"</p></div>

                    <img class="contact_image" src="newImages/cityImage.jpg">  
</div>


<footer class=" row col-lg-12">

            <p>
                &copy; Copyright 2012. All rights reserved
            </p>
</footer>

enter image description here

Answer 1

删除row中的class=" row col-lg-8 col-md-8 col-sm-8 col-xs-12"。使用类row的包装div。

也只将类row用于页脚，并使用类col-lg-12添加内部div。

在标题中，这是正确的。

Answer 2

Kipperman ，希望这可以帮助您在这里找到正确的方向我添加了一种方法让您将图片放入divs，这样您就不会遇到上述问题。我编写了它，所以一切都在屏幕尺寸内。

以下是 Fiddle 。

.image{
    background-image: url('http://placehold.it/900x500/e67e22/ffffff&amp;text=image');
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

BootStrap网格无法正常工作？

2 个答案: