Bootstrap重叠问题

时间：2015-12-02 16:10:00

标签： html css

Bootstrap重叠问题

每当我将网站的大小调整为较小的尺寸时，我会发现内部div元素与其他div元素重叠的问题。我有关于此之前和之后的网站图片供您查看。

在调整大小之前：

enter image description here

调整大小后：

enter image description here

我的CSS代码：

#logo{
    text-align: center;
    padding-top: 100px;
}
#titleImage{
    height: 900px;
    padding-top: 40px;
    background-size: cover;
    filter: grayscale(30%);
    -webkit-filter: grayscale(50%);   
}
#logo img{
     -webkit-filter: drop-shadow(2px 2px 2px rgba(0,0,0,1));
       -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#000000')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#000000')";
    padding-bottom: 60px;
}
@font-face{
    font-family: "comicF";
    src: url(../font/Kaushan.otf) format('truetype');
}
#navbar a{
    font-size: 25px;
    color: white;
    font-family: comicF;
    display: inline;
    text-shadow: 10px 10px 5px white;
    padding-right: 30px;
    display: block;
    text-align:center;
    text-shadow: 1px 1px black;
    text-decoration: none;
}
#navbar ul {

    list-style-type: none;
    margin:0 auto;
    text-align:center;
    padding-left: 0px;
}
#navbar li {
    display: inline-block;
    text-align: center;
}
.navbar-change {
    padding: 0;
    border-bottom: 1px solid rgba(255,255,255,.3);
    background: #000;
    height: 90px;
}
#about{
    height: 500px;
    width: 100%;   
    background-size: cover;
    filter: grayscale(40%);
    -webkit-filter: grayscale(50%);  /* For Webkit browsers */
   }
#about div{
    text-align: center;
    padding-top: 30px;
    font-family: normalA;
    font-size: 30px; 
    background-color: rgba(60, 54, 53, .3);
    height: 100%;
}
.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
#about h1{    
    padding-top: 65px;
    color: #FAE9C4;
    font-size: 99px;
}
#about p{
    padding-left: 30px;
    padding-right: 30px;  
    font-family: normalA;
    text-align: center;
    font-size: 25px;
    color: white;
}
#line1 {
    border: 0;
    height: 1px;
    width: 70%;
    background-image: linear-gradient(to right, rgba(75,63,54, 0), rgba(75,63,54, 0.75), rgba(75,63,54, 0));
}
#team{
    padding-top: 25px;
    background-color:  white;
    width: 100%;
    height: 660px;
    text-align: center;
}
#team p{
    padding-top: 0px;
    font-family: normal;
}
#team h{
    padding-bottom: 0px;
    margin-bottom: 0px;
    /*    color: #3C3635;*/
    font-family: comicC;
}
.teamDiv{
    padding-top: 35px;
    border-radius: 25%; 
    text-align: center;     
}
#infoGeneral{
    padding-top: 30px;  
    width: 100%;
    height: 280px;
    /*    background-color:  #3C3635; */
    background-color:    #4D3F36;
    /*    #4b433b*/
    font-size: 15px;
    text-align: center;
    border-bottom: 4px #FAE9C4 solid;
    filter: grayscale(20%);
    -webkit-filter: grayscale(20%); 
}
#infoGeneral p{
    font-family: normal;
    border-top: 0px;
    color: white;
    font-size: 20px;
}
#infoGeneral p:first-of-type{
    padding-top: 9px;
}
.underScoreInfoGeneral{
    padding-top: 1px;
    margin: 0 auto;
    background-color: #FAE9C4;
    width: 70px;
    height: 4px;
}
.socialIcons{
    padding-top: 10px;
}
#map { //gogle maps
       width: 100%;
       height: 350px;
}
#footer {
    width: 100%;
    height: 30px;
    background-color: #3C3635;
}

我的HTML代码：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <title>About</title>
        <link href="css/aboutCSS.css" rel="stylesheet">
        <link href="css/starter-template.css" rel="stylesheet">
        <link href="css/bootstrap.css" rel="stylesheet">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js"></script>
    </head>
    <body >
        <div class="container-fluid">
            <div id="titleImage" style="background-image: url(img/coffeee.jpg);">
                <div class="row">                
                    <div id="logo" class="col-md-8 col-md-offset-2"><img src="img/logo_white.png" style="width:40%;" alt="Mountain View"></div>                               
                    <span style="font-size:2.5em; color: white; text-align: right;"  class="glyphicon glyphicon-pencil col-md-1 col-md-offset-1" aria-hidden="true"></span>        
                </div>  <!-- 1row -->
                <div class="row">
                    <div id="navbar" class="col-md-12">
                        <ul>
                            <li><a href="index.jsp">Home</a></li>
                            <li><a href="about.jsp">About</a></li>
                            <li><a href="shop.jsp">Shop</a></li>
                        </ul><!-- NAVBAR-->
                    </div><!-- row -->
                </div> 
            </div>
            <!--  //////////////////////////////////////////////////////////////////////////////////-->
            <div class="row" style="background-color: white; height: 300px;">
            </div>
            <div class="row">
                <div id="about" style="background-image: url(img/coffee-beans.jpg);"><div><h1 style="font-family: comicF; font-size: 50px;">Lorem totem</h1>
                        <p>rem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div></div>  
            </div>
            <div class="row">
                <div id="team">
                    <h1 style="font-family: impactA; font-size: 45px; color: #4C3F37;">Our amazing team</h1><hr id="line1"/>
                    <div class="col-md-4 teamDiv" ><img src="img/woman3.jpg" class="img-circle" alt="" style="width:30%;">
                        <p style="font-size: 340%; padding-top: 15px; font-family: comicC; margin-bottom: 0px;">Lucy Luu</p ><p style="color: #4b433b;">Marketing Director</p>
                        <div class="socialIcons"><img src="img/facebook3.png" alt="" style="width:7%;">
                            <img src="img/twitter3.png" alt="" style="width:7%;">
                            <img src="img/linkedin3.png" alt="" style="width:7%;">
                        </div>
                    </div>
                    <div class="col-md-4 teamDiv"><img src="img/woman4.jpg" class="img-circle" alt="" style="width:30%;">
                        <p style="font-size: 340%; padding-top: 15px; font-family: comicC; margin-bottom: 0px;">Melissa Gunson</p ><p style="color: #4b433b;">Founder</p>
                        <div class="socialIcons">     <img src="img/facebook3.png" alt="" style="width:7%;">
                            <img src="img/twitter3.png" alt="" style="width:7%;">
                            <img src="img/linkedin3.png" alt="" style="width:7%;">
                        </div>
                    </div>
                    <div class="col-md-4 teamDiv"><img src="img/man1.jpg" class="img-circle" alt="" style="width:30%;">
                        <p style="font-size: 340%;  padding-top: 15px; font-family: comicC; margin-bottom: 0px;">James Hutson</p><p style="color: #4b433b;">Store Manager</p>
                        <div class="socialIcons"><img src="img/facebook3.png" alt="" style="width:7%;">
                            <img src="img/twitter3.png" alt="" style="width:7%;">
                            <img src="img/linkedin3.png" alt="" style="width:7%;">
                        </div>
                    </div>
                </div>
            </div><!-- row -->
            <div class="row">
                <div id="infoGeneral">
                    <div class="col-md-4">
                        <div><img src="img/Bhome.png" alt="" style="width:60px; text-align: center;"></div>
                        <h1 style="color: white; font-family: comicF; font-size: 43px; margin-bottom: 0px;">Location</h1>
                        <p>252 E Market St</p>
                        <p>Louisville, KY 40202</p>
                        <div class="underScoreInfoGeneral"></div>
                    </div>
                    <div class="col-md-4">
                        <div><img src="img/Bdata.png" alt="" style="width:60px; text-align: center;"></div>         
                        <h2 style="color: white; font-family: comicF; font-size: 43px; margin-bottom: 0px;">Opening Times</h2>
                        <p>Monday - Saturday: 8:00 - 21:00</p>
                        <p>Sunday: closed</p>
                        <div class="underScoreInfoGeneral"></div>                
                    </div>
                    <div class="col-md-4">
                        <div><img src="img/Bworldwide.png" alt="" style="width:60px; text-align: center;"></div>         
                        <h2 style="color: white; font-family: comicF; font-size: 43px; margin-bottom: 0px;">Contact</h2>
                        <p><img src="img/letter106.png" alt="" style="width:25px; padding-right: 4px;"> jameshutson@gmail.com</p>
                        <p><img src="img/telephone5.png" alt="" style="width:25px; padding-right: 4px;"> 502 936 7664</p>
                        <div class="underScoreInfoGeneral"></div>                
                    </div>
                </div>
            </div><!-- row -->
            <div class="row">
                <div class="col-md-12" id="map"></div>            
            </div>
            <div class="row">
                <div id="footer"></div>
            </div>
        </div><!-- container-->
        <script src="js/map.js"></script>   
        <script src="js/navbar.js"></script>          
    </body>
</html>

我假设那是因为我有固定的填充和背景div的像素数。但是，如果我想将某些div放在我喜欢的确切位置，我就不知道解决这个问题的方法。 我非常感谢任何帮助。

2 个答案:

答案 0 :(得分：0)

您想要实现什么样的布局，僵硬或流畅？如果你担心div在准确的位置，那么使用em听起来像你的解决方案。 例如

#about p{ padding-left: 10em; padding-right: 10em;
font-family: normalA; text-align: center; font-size: 25px; color: white; }

这将允许您的div更加动态，具体取决于窗口的大小，同时设置最小宽度将保持div内容溢出，否则您可以将溢出设置为隐藏，它将消失或设置为滚动哪个会强制用户滚动查看其余内容，但可以让您更好地控制内容的放置。

答案 1 :(得分：0)

您需要从CSS中的#infoGeneral中删除height属性。从截图的外观来看，您的部分不重叠，但您的CSS正在切断内容。你的DIV有很多固定的高度，但你的内容似乎更高，因此被切断了。如果你移除固定的高度，那么它应该更好地流动

相关问题
最新问题