移动内容滞留在页面中间？

时间：2018-01-26 21:08:19

标签： html css twitter-bootstrap-3 positioning

我不确定为什么要这样做，但我的jumbotron和我的导航都在推动屏幕的左侧，甚至使他们的位置绝对和顶部，0的权利不是＆＃39;帮助。他们走的最远的是页面的中间部分。我已经添加了问题的图片以及我的HTML和CSS代码。

Mobile Example

＆＃13;
＆＃13; 
body {
    max-height: 1050px;
    font-family: 'Biryani', sans-serif;
    line-height: 1.5em;
    overflow: scroll;
}

/* Navbar Style */
.navbar {
    margin-left: 104px;
    margin-right: 104px;
    border: none;
    min-height: 140px;    
}

.navbar-brand {
    padding-left: 0;
}

.navbar-brand>img {
    margin-top: 24px;
    width: 286px;
    height: 70px;
}

.navbar-default {
    margin-bottom: 0px;
}

.navbar-default .navbar-nav>li>a {
    margin-top: 54px;
    padding: 32px;
    font-size: 18px;
    font-weight: 300;
    color: #173b6d;
    border-right: 1px solid #dedee0; 
    border-image: linear-gradient(to top, #dedee0, rgba(222, 222, 224, 0)) 1 100%;
}

.navbar-default .navbar-nav>li:last-child>a {
    border-right: 0;
}

/* Hero Style */
.jumbotron {
    margin-bottom: 0px;
    padding: 0;
    background: url(../img/image.jpg) no-repeat center top;
    background-size: cover;
    height: 768px;
    color: #fff;
    z-index: 1;
}

.jumbotron .h1, .jumbotron h1{
    margin-top: 247px;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 60px;
}

.h3, h3 {
    margin: 0;
    line-height: 1.5em;
    font-weight: 600;
    font-size: 24px;
    color: #d8d9db;
}

/* Button Style */
.btn-primary {
    background-color: #ee4e5a;
    border: none;
    border-radius: 0;
    height: 54px;   
}

.btn-primary:hover {
    background-color: #d34551
}

button, input, optgroup, select, textarea {
    font-family: 'Biryani', sans-serif;
}

.btn-group, .btn-group-vertical {
    margin-top: 18px;
    width: 221px;
    box-shadow: -4px 4px rgba(0,0,0,0.2);
}

#btn-clock {
    font-size: 32px;
    line-height: 28px;
    width: 54px;
    background-color: #d34551;
}

#btn-cta {
    font-size: 18px;
    padding: 24px;
    line-height: 14px;
}

/* Section Style */
#slant{
    background-color: #0e4375;
}

#slant:before {
    content: '';
    position: absolute;
    right: 0;
    top: 715px;
    overflow: visible;
    width: 100%;
    height: 316px;
    background: #0e4375;
    z-index: 0;
    -webkit-transform: skewY(-4.5deg);
    -moz-transform: skewY(-4.5deg);
    -ms-transform: skewY(-4.5deg);
    -o-transform: skewY(-4.5deg);
    transform: skewY(-4.5deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: initial;
}

section {
    top: 786px;
    padding-bottom: 96px;
    background: #0e4375;
    position: absolute;
    z-index: 2;
}

section>h2 {
    font-weight: 400;
    font-size: 40px;
    color: #fff;  
}

section>p {
    margin-top: 20px;
    margin-left: 270px;
    margin-right: 270px;
    font-weight: 400;
    font-size: 19px;
    line-height: 1.5em;
    color: #fff;
}

/* Media Queries */

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
    .navbar {
        margin-left: 10px;
        margin-right: 10px;
    }
    
}
＆＃13; 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>yourlogo | Home</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/normalize.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Biryani:300,400,600,700,800" rel="stylesheet">
    <link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">

  </head>
  <body>

    
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img alt="yourlogo" src="img/logo.png">
                </a>
            </div>
            
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">about</a></li>
                    <li><a href="#">solutions</a></li>
                    <li><a href="#">resources</a></li>
                    <li><a href="#">contact</a></li>
                </ul>
            </div> <!-- end navbar-collapse -->
        </div> <!-- end container-fluid -->
    </nav>  
    
    <!-- Hero Image -->
    <div class="jumbotron text-center">
        <div class="container">
            <h1>Main Headline Here</h1>
            <h3>Pellentesque augue erat, condimentum eget, ornare ut dui</h3>
            <div class="btn-group">
                <button type="button" class="btn btn-primary" id="btn-clock">
                    <i class="far fa-clock"></i>
                </button>
                <button type="button" class="btn btn-primary" id="btn-cta">
                    Call to Action
                </button>
            </div>
        </div>
        
    </div>
      
    <!-- Section -->
    <div class="text-center" id="slant">
        <section>
            <h2>Section Headline</h2>
            <p>Vivamus feugiat eros eu augue dapibus aliquam. Cras at magna efficitur, consectetur sapien eu, convallis metus. Curabitur eusimod orci nec malesuada iaculis. Pellentesque augue erat, condimentum sit amet porta eget, ornare ut dui. Vestibulum feugiat vel ipsum at ullamcorper. Cras at magna efficitur, consectetur sapien eu, convallis metus.</p>
        </section>
    </div>

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

我认为您的问题存在于您的#slant CSS ID中，告诉您的文字在320像素宽屏幕上向右移动270px。

image link (I don't have 10 rep, yet)

如果将鼠标悬停在带有检查器的元素上，它应该告诉您该元素的宽度为320像素，尽管它看起来像什么。

another image

我可能错了，但我无法确定，因为我无法使用您提供的代码复制您的网站。

答案 1 :(得分：0)

将width: 100%;放在section上。该部分中的段落在左侧和右侧有太多边距，这会在较小的屏幕尺寸上产生此问题。 

body {
    max-height: 1050px;
    font-family: 'Biryani', sans-serif;
    line-height: 1.5em;
    overflow: scroll;
}

/* Navbar Style */
.navbar {
    margin-left: 104px;
    margin-right: 104px;
    border: none;
    min-height: 140px;    
}

.navbar-brand {
    padding-left: 0;
}

.navbar-brand>img {
    margin-top: 24px;
    width: 286px;
    height: 70px;
}

.navbar-default {
    margin-bottom: 0px;
}

.navbar-default .navbar-nav>li>a {
    margin-top: 54px;
    padding: 32px;
    font-size: 18px;
    font-weight: 300;
    color: #173b6d;
    border-right: 1px solid #dedee0; 
    border-image: linear-gradient(to top, #dedee0, rgba(222, 222, 224, 0)) 1 100%;
}

.navbar-default .navbar-nav>li:last-child>a {
    border-right: 0;
}

/* Hero Style */
.jumbotron {
    margin-bottom: 0px;
    padding: 0;
    background: url(../img/image.jpg) no-repeat center top;
    background-size: cover;
    height: 768px;
    color: #fff;
    z-index: 1;
}

.jumbotron .h1, .jumbotron h1{
    margin-top: 247px;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 60px;
}

.h3, h3 {
    margin: 0;
    line-height: 1.5em;
    font-weight: 600;
    font-size: 24px;
    color: #d8d9db;
}

/* Button Style */
.btn-primary {
    background-color: #ee4e5a;
    border: none;
    border-radius: 0;
    height: 54px;   
}

.btn-primary:hover {
    background-color: #d34551
}

button, input, optgroup, select, textarea {
    font-family: 'Biryani', sans-serif;
}

.btn-group, .btn-group-vertical {
    margin-top: 18px;
    width: 221px;
    box-shadow: -4px 4px rgba(0,0,0,0.2);
}

#btn-clock {
    font-size: 32px;
    line-height: 28px;
    width: 54px;
    background-color: #d34551;
}

#btn-cta {
    font-size: 18px;
    padding: 24px;
    line-height: 14px;
}

/* Section Style */
#slant{
    background-color: #0e4375;
}

#slant:before {
    content: '';
    position: absolute;
    right: 0;
    top: 715px;
    overflow: visible;
    width: 100%;
    height: 316px;
    background: #0e4375;
    z-index: 0;
    -webkit-transform: skewY(-4.5deg);
    -moz-transform: skewY(-4.5deg);
    -ms-transform: skewY(-4.5deg);
    -o-transform: skewY(-4.5deg);
    transform: skewY(-4.5deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: initial;
}

section {
    top: 786px;
    padding-bottom: 96px;
    background: #0e4375;
    position: absolute;
    width: 100%;
    z-index: 2;
}

section>h2 {
    font-weight: 400;
    font-size: 40px;
    color: #fff;  
}

section>p {
    margin-top: 20px;
    margin-left: 270px;
    margin-right: 270px;
    font-weight: 400;
    font-size: 19px;
    line-height: 1.5em;
    color: #fff;
}

/* Media Queries */

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
    .navbar {
        margin-left: 10px;
        margin-right: 10px;
    }
    
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>yourlogo | Home</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/normalize.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Biryani:300,400,600,700,800" rel="stylesheet">
    <link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">

  </head>
  <body>

    
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img alt="yourlogo" src="img/logo.png">
                </a>
            </div>
            
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">about</a></li>
                    <li><a href="#">solutions</a></li>
                    <li><a href="#">resources</a></li>
                    <li><a href="#">contact</a></li>
                </ul>
            </div> <!-- end navbar-collapse -->
        </div> <!-- end container-fluid -->
    </nav>  
    
    <!-- Hero Image -->
    <div class="jumbotron text-center">
        <div class="container">
            <h1>Main Headline Here</h1>
            <h3>Pellentesque augue erat, condimentum eget, ornare ut dui</h3>
            <div class="btn-group">
                <button type="button" class="btn btn-primary" id="btn-clock">
                    <i class="far fa-clock"></i>
                </button>
                <button type="button" class="btn btn-primary" id="btn-cta">
                    Call to Action
                </button>
            </div>
        </div>
        
    </div>
      
    <!-- Section -->
    <div class="text-center" id="slant">
        <section>
            <h2>Section Headline</h2>
            <p>Vivamus feugiat eros eu augue dapibus aliquam. Cras at magna efficitur, consectetur sapien eu, convallis metus. Curabitur eusimod orci nec malesuada iaculis. Pellentesque augue erat, condimentum sit amet porta eget, ornare ut dui. Vestibulum feugiat vel ipsum at ullamcorper. Cras at magna efficitur, consectetur sapien eu, convallis metus.</p>
        </section>
    </div>

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
  </body>
</html>

相关问题
最新问题