移动内容卡在页面中间？答案

【问题标题】：Mobile Content Stuck in Middle of the Page?移动内容卡在页面中间？
【发布时间】：2018-01-27 06:10:59
【问题描述】：

我不知道为什么会这样，但我的 jumbotron 和我的导航都推到屏幕的左侧，甚至将它们的位置设为绝对位置和顶部，0 的右侧也无济于事。他们会走的最远是页面的中间。我已经添加了问题的图片以及我的 HTML 和 CSS 代码。

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;
    }
    
}

<!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>

【问题讨论】：

标签： html css twitter-bootstrap-3 positioning

【解决方案1】：

我认为您的问题在于您的 #slant CSS id 告诉您的文本在 320 像素宽的屏幕上向右移动 270 像素。

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

如果您使用检查器将鼠标悬停在元素上，它应该会告诉您该元素是 320 像素宽，尽管它看起来像什么。

another image

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

【讨论】：

【解决方案2】：

将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>

【讨论】：