Question

正如我的标题所示，我的内容会在屏幕上显示。

我查看了我的css文件，并且没有任何带有减号的边距。那么为什么内容会在屏幕两侧消失？

感谢任何有关原因的建议。

感谢。

＆＃13;

body{
    background: linear-gradient(rgb(100,50,50), rgb(80,20,20)) no-repeat;
    color: white;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
}



img{
    margin: 1%;
}


/*Header*/
header {
  background-color: #1d1e21;
  height: 100vh;
  position: relative;
}

header span {
  color: #fff;
}

header input {
  margin-top: 20px;
}

p#slogan  {
  color: #fff;
  letter-spacing: 2px;
}

ul {
  list-style-type: none;
}

ul li {
  display: inline;
  padding: 0 0 0 10px;
}

ul li a {
  color: #fff;
  list-style-type: none;
}

ul li a:hover {
  color: black;
  list-style-type: none;
  text-decoration: none;
}



/*Main*/

/*sloganAndSocial*/
#sloganAndSocial {
  background-color: #1d1e21;
  position: absolute;
  
  bottom: 0px;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>NBC 2011</title>
        <link rel="stylesheet" href="css/main.css" type="text/css" >
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
        <script src="js/scripts.js" type="text/javascript"></script>
    </head>
    <body>

<!--Header section-->
        <header>
            <div id="topBar">
                    <div class="row">
                        <h1 class="pull-left"><span>NORDIC </span>BARISTACUP</h1>
                        <form class="pull-right">
                            <input type="text" name="search" placeholder="Search..">
                        </form>
                    </div>
                    <div class="row">
                        <p class="pull-left" id="slogan">be together &nbsp; act together &nbsp; learn together</p>
                        <ul class="pull-right">
                            <li><a href="#">ABOUT NBV</a></li>
                            <li><a href="#">2011 EVENT</a></li>
                            <li><a href="#">NORDIC ROASTER</a></li>
                            <li><a href="#">RESULTS</a></li>
                            <li><a href="#">LINKS</a></li>
                            <li><a href="#">CONTACT</a></li>
                        </ul>
                    </div>
            </div>

<!--Main section-->
            <div class="main">
                <img src="" alt="bo!" class="cover" /> 
            </div>

            <div id="sloganAndSocial">
                <div class="container">
                    <div class="row">
                        <h2 class="pull-left">"To create an environment in which knowledge<br>about coffee and its sphere can be obtained"</h2>
                        <ul class="share-buttons">
                            <li><a href="https://www.facebook.com/sharer/sharer.php?u=&t=a" title="Share on Facebook" target="_blank"><img alt="Share on Facebook" src="images/flat_web_icon_set/inverted/Facebook.png"></a></li>
                            <li><a href="https://twitter.com/intent/tweet?source=&text=a:%20" target="_blank" title="Tweet"><img alt="Tweet" src="images/flat_web_icon_set/inverted/Twitter.png"></a></li>
                            <li><a href="https://plus.google.com/share?url=" target="_blank" title="Share on Google+"><img alt="Share on Google+" src="images/flat_web_icon_set/inverted/Google+.png"></a></li>
                            <li><a href="http://pinterest.com/pin/create/button/?url=&description=a" target="_blank" title="Pin it"><img alt="Pin it" src="images/flat_web_icon_set/inverted/Pinterest.png"></a></li>
                            <li><a href="mailto:?subject=a&body=a:%20" target="_blank" title="Send email"><img alt="Send email" src="images/flat_web_icon_set/inverted/Email.png"></a></li>
                        </ul>
                    </div>
                </div>
            </div>  
    </header>

             
        

<!--Section1-->
        

    </body>
</html>

＆＃13;

Answer 1

从元素中删除pull-left和pull-right类，并更好地使用flexbox进行对齐。它会让你的生活更轻松！

另外，为什么整个网站的包装都在header ???

内

Answer 2

您的divs中有topBar个row，其中container类不在Bootstrap的元素中。这不是divs的意图，因此会导致意外行为。您必须使用类div将这两个container包装在另一个header中。

另外，正如@nik_m所提到的：为什么要将整个页面包裹在headers中？那不是，<?xml version="1.0" encoding="UTF-8"?> <infinispan> <jgroups> <stack-file name="tcp" path="jgroups-tcp.xml"/> </jgroups> <cache-container default-cache="default"> <transport cluster="${rv.cache.clusterName}" stack="tcp" /> <replicated-cache name="default"> <locking acquire-timeout="10000" concurrency-level="50" isolation="READ_COMMITTED" striping="false"/> </replicated-cache> </infinispan>应该做什么。

为什么内容会脱离屏幕

2 个答案: