当我在移动终端上加载我的网站主页时，可以左右移动屏幕，如果我向左移动，它会反弹回原位，但如果我向右移动，它会反弹回来，但会在整个网页容器中留下大约5 px的白色空白，除了导航栏。我没有内容会推网站宽度或margin-right。我使用的是bootstrap，我会上传一个代码片段，但看到问题的最佳方法是去网站，它也只显示在移动的设备上，我没有问题时，测试移动视图与谷歌Chrome移动视图。这个问题只发生在我的主页网页，没有其他网页有问题。网站链接：http://buildingims.com/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="theme-color" content="#0054a5" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#333">
<title>Inspection Software for the Professional - Link Inspect Pro</title>
<link rel="shortcut icon" href="assets/img/favicon.ico?v=3">
</head>
<body>
<div id="ms-preload" class="ms-preload">
<div id="status">
<div class="spinner">
<div class="dot1"></div>
<div class="dot2"></div>
</div>
</div>
</div>
<div class="ms-site-container">
<div class="modal modal-primary" id="ms-account-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog animated zoomIn animated-3x" role="document">
<div class="modal-content">
<div class="modal-header d-block shadow-2dp no-pb">
<button type="button" class="close d-inline pull-right mt-2" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true"> <i class="zmdi zmdi-close"></i> </span>
</button>
<div class="modal-title text-center">
<a href="index.html">
<img alt="The Best Home Inspection Software" src="assets/img/logo.png" style="height: 50px; width:350px;" />
</a>
<!-- <span class="ms-logo ms-logo-white ms-logo-sm mr-1">LIP</span> <h3 class="no-m ms-site-title">Link Inspect <span>Pro</span> </h3> -->
</div>
<div class="modal-header-tabs">
<ul class="nav nav-tabs nav-tabs-full nav-tabs-2 nav-tabs-primary" role="tablist">
<li class="nav-item" role="presentation">
<a href="#ms-login-tab" aria-controls="ms-login-tab" role="tab" data-toggle="tab" class="nav-link active withoutripple"> <i class="zmdi zmdi-account"></i> Login</a>
</li>
<!-- <li class="nav-item" role="presentation"> <a href="#ms-register-tab" aria-controls="ms-register-tab" role="tab" data-toggle="tab" class="nav-link withoutripple"> <i class="zmdi zmdi-account-add"></i> Register</a> </li>-->
<li class="nav-item" role="presentation">
<a href="#ms-recovery-tab" aria-controls="ms-recovery-tab" role="tab" data-toggle="tab" class="nav-link withoutripple"> <i class="zmdi zmdi-key"></i> Account Recovery</a>
</li>
</ul>
</div>
</div>
<div class="modal-body">
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade active show" id="ms-login-tab">
<form autocomplete="off">
<fieldset>
<div class="form-group label-floating">
<div class="input-group"> <span class="input-group-addon"> <i class="zmdi zmdi-account"></i> </span>
<label class="control-label" for="ms-form-user">Email</label>
<input type="text" id="ms-form-user" class="form-control" required>
</div>
</div>
<div class="form-group label-floating">
<div class="input-group"> <span class="input-group-addon"> <i class="zmdi zmdi-lock"></i> </span>
<label class="control-label" for="ms-form-pass">Password</label>
<input type="password" id="ms-form-pass" class="form-control" required>
</div>
</div>
<div class="row mt-2">
<div class="col-md-6">
<div class="checkbox">
<label>
<input type="checkbox">Remember Me</label>
</div>
</div>
<div class="col-md-6">
<button class="btn btn-raised btn-primary pull-right">Login</button>
</div>
</div>
</fieldset>
</form>
<div class="text-center">
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="ms-recovery-tab">
<form>
<fieldset>
<div class="form-group label-floating">
<div class="input-group"> <span class="input-group-addon"> <i class="zmdi zmdi-email"></i> </span>
<label class="control-label" for="ms-form-email-re">Email</label>
<input type="email" id="ms-form-email-re" class="form-control" required/>
</div>
</div>
<button class="btn btn-raised btn-block btn-primary">Send Password</button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<header class="ms-header ms-header-primary">
<div class="container container-full">
<div class="ms-title">
<a href="index.html">
<img alt="Link Inspect Pro Best Inspection Software" src="assets/img/logo.png" style="height:45px; width:350px;" />
</a>
</div>
<div class="header-right">
</div>
</div>
</header>
<nav class="navbar navbar-expand-md navbar-static ms-navbar ms-navbar-primary">
<div class="container container-full">
<div class="navbar-header" style="max-width:280px;">
<a class="navbar-brand" href="index.html">
<img alt="The Best Inspection Software 2018" src="assets/img/logo.png" style="width:100%; height:70%; " />
</a>
</div>
<div class="collapse navbar-collapse" id="ms-navbar">
<ul class="navbar-nav">
<li class="nav-item"> <a href="page-about.html" class="nav-link animated fadeIn animation-delay-7">About Us</a>
</li>
<li class="nav-item"> <a href="page-features.html" class="nav-link animated fadeIn animation-delay-7">Features</a>
</li>
<li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle animated fadeIn animation-delay-7" data-toggle="dropdown" data-hover="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-name="blog">Industry <i class="zmdi zmdi-chevron-down"></i> </a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="inspection-home.html">Home Inspection</a>
</li>
<li>
<a class="dropdown-item" href="inspection-compliance.html">Compliance Inspection</a>
</li>
<li>
<a class="dropdown-item" href="page-coming.html">Commercial Inspection</a>
</li>
<li>
<a class="dropdown-item" href="page-coming.html">Environmental Inspection</a>
</li>
<li>
<a class="dropdown-item" href="page-coming.html">Insurance Inspection</a>
</li>
</ul>
</li>
<li class="nav-item"> <a href="page-contact.html" class="nav-link animated fadeIn animation-delay-7">Contact</a>
</li>
<li class="nav-item"> <a href="javascript:void(0)" class="nav-link animated fadeIn animation-delay-7" data-toggle="modal" data-target="#ms-account-modal"> Login </a>
</li>
<li class="nav-item">
<a href="index.html#free-trial" class="btn btn-raised color-primary nav-link animated flipInX animation-delay-10" style="border-radius: 25px; height:65%;">Free Trial</a>
</li>
</ul>
</div>
<a href="javascript:void(0)" class="ms-toggle-left btn-navbar-menu"> <i class="zmdi zmdi-menu"></i>
</a>
</div>
</nav>
<header class="ms-hero-page ms-hero-img-keyboard ms-hero-bg-dark color-white">
<div class="container index-1">
<div class="row">
<div class="col-lg-12">
<h1 class="text-uppercase typed-title">Inspection Software for the Professional <br><span class="color-primary typed-class"></span> </h1>
<p class="lead lead-sm color-light">Link Inspect Pro is a cloud based, comprehensive software that allows you to perform inspections, create reports, and keep your company organized.</p>
<ul class="ms-list-arrow">
<li>High-Speed servers and performance.</li>
<li>Comprehensive Software.</li>
<li>Professional Reports.</li>
<li>Perform Inspections.</li>
</ul>
</div>
<div class="col-lg-12 text-center">
<a href="page-login.html" class="btn btn-raised btn-warning">Sign Up for Free Trial</a>
<a href="page-coming.html" class="btn btn-raised btn-warning pl-1 pr-1">Become a Network Inspector</a>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="text-center ms-margin">
<a href="javascript:void(0)" class="btn btn-primary btn-raised btn-app" style="width:20%; min-width:200px">
<div class="btn-container"> <i class="fab fa-google-play"></i> <span style="text-transform:uppercase;">Get it on</span>
<br><strong>Google Play</strong>
</div>
</a>
<a href="javascript:void(0)" class="btn btn-primary btn-raised btn-app" style="width:20%; min-width:200px">
<div class="btn-container"> <i class="fa fa-apple"></i> <span>Download on the </span>
<br><strong>App Store</strong>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="container">
<section>
<h1 class="right-line">Features</h1>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 mb-2">
<div class="ms-icon-feature">
<div class="ms-icon-feature-icon rotate-icon"> <span class="ms-icon ms-icon-lg ms-icon-inverse"> <a href="page-features.html" alt="Cloud"><i class="fa fa-cloud"></i></a> </span>
</div>
<div class="ms-icon-feature-content">
<h4 class="color-primary"><a href="page-features.html" alt="Cloud Computing">Cloud Hosting</a></h4>
<p>Hosted on AWS, data is synced and stored through the cloud so you can access all your data on any device with any network at any location.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mb-2">
<div class="ms-icon-feature">
<div class="ms-icon-feature-icon rotate-icon"> <span class="ms-icon ms-icon-lg ms-icon-inverse"> <a href="page-features.html" alt="Reports"><i class="fa fa-clipboard"></i></a> </span>
</div>
<div class="ms-icon-feature-content">
<h4 class="color-primary"><a href="page-features.html" alt="Professional Reports">Professional Reports</a></h4>
<p>Sleek & Professional reports can be customized to ones own preference. As well as, delivere the report directly to the customer without ever leaving the site.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mb-2">
<div class="ms-icon-feature">
<div class="ms-icon-feature-icon rotate-icon"> <span class="ms-icon ms-icon-lg ms-icon-inverse"> <a href="page-features.html" alt="Apps"><i class="fa fa-tablet"></i></a> </span>
</div>
<div class="ms-icon-feature-content">
<h4 class="color-primary"><a href="page-features.html" alt="Mobile Apps">Mobile and Tablet Apps</a></h4>
<p>Link Inspect Pro apps for mobile devices allow seemless inspections to be done on site. Making inspections not only easy but quicker.</p>
</div>
</div>
</div>
</div>
<h1 class="right-line">Inspections</h1>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 mb-1">
<div class="ms-icon-feature">
<div class="ms-icon-feature-icon rotate-icon"> <span class="ms-icon ms-icon-lg ms-icon-inverse"> <a href="page-coming.html" alt="Shield"><i class="fa fa-shield"></i></a> </span>
</div>
<div class="ms-icon-feature-content">
<h4 class="color-primary"><a href="page-coming.html" alt="Security Shield">Request Inspection</a></h4>
<p>Never lose any information again with lead and quote tNever lose any information again with lead and quote tNever lose any information again with lead and quote t</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mb-1">
<div class="ms-icon-feature">
<div class="ms-icon-feature-icon rotate-icon"> <span class="ms-icon ms-icon-lg ms-icon-inverse"> <a href="page-coming.html" alt="Organize"><i class="fa fa-bars"></i></a> </span>
</div>
<div class="ms-icon-feature-content">
<h4 class="color-primary"><a href="page-coming.html" alt="Organization">Find an Inspector</a></h4>
<p>Never lose any information again with lead and quoteNever lose any information again with lead and quote tNever lose any information again with lead and quote t.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="ms-icon-feature">
<div class="ms-icon-feature-icon rotate-icon"> <span class="ms-icon ms-icon-lg ms-icon-inverse"> <a href="page-coming.html" alt="Customize"><i class="fa fa-cog"></i></a> </span>
</div>
<div class="ms-icon-feature-content">
<h4 class="color-primary"><a href="page-coming.html" alt="Customization">Inspector Network</a></h4>
<p>Create and edit templates, contract language, contactNever lose any information again with lead and quote tNever lose any information again with lead and quote t</p>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="wrap wrap-mountain">
<div class="container">
<h2 class="text-center text-light mb-6">Inspection Software created with <strong>You</strong> in Mind</h2>
<div class="row">
<div class="col-lg-6 order-lg-2 mb-4 center-block">
<img src="assets/img/demo/mock.png" alt="Link Inspect Pro Best Inspection Software" class="img-fluid center-block" style="max-height:400px">
</div>
<div class="col-lg-6 order-lg-1 pr-6">
<div class="text-center"> <a href="page-features.html" class="btn btn-warning btn-raised mr-1"> Learn More about LIP <i class="zmdi zmdi-arrow-right"></i> </a>
</div>
</div>
</div>
</div>
</div>
<div class="container mt-6 mb-1">
<h2 class="text-center text-dark mb-6">Inspector Network</h2>
<div class="row">
<div class="col-lg-6 order-lg-2 pr-6">
</div>
<div class="col-lg-6 order-lg-1 mb-4 center-block">
<img src="assets/img/demo/mock.png" alt="Link Inspect Pro Best Inspection Software" class="img-fluid center-block" style="max-height:400px">
</div>
</div>
</div>
<style>
.trial-block{background: url(assets/img/black_wall.png) no-repeat fixed; background-size: cover; background-position: center center !important; padding: 80px 0;}.trial-form-block{background: #fff; border-radius: 4px; margin: 0 auto; max-width: 600px; padding: 35px; width: 100%;}
</style>
<section id="free-trial">
<div class="trial-block">
<div class="trial-form-block">
<div class="text-center">
<h2>Link Inspect Pro Trial</h2>
<p>Use Link Inspect Pro Software for 30 days or complete 3 inspections before subscribing</p>
</div>
<form action="https://linkinspectpro.com/users/registration" method="post" accept-charset="utf-8" name="registration_form" id="registration_form">
<div class="row">
<div class="col-sm-6">
<div class="form-group row label-floating">
<label class="control-label" for="firstname">First Name</label>
<input type="text" name="firstname" value="" id="firstname" class="form-control" maxlength="50" required/>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="lastname">Last Name</label>
<input type="text" name="lastname" value="" id="lastname" class="form-control" maxlength="50" required/>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="email">Email</label>
<input type="text" name="email" value="" id="email" maxlegth="150" class="form-control" required/>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="password">Password</label>
<input type="password" name="password" value="" id="password" maxlength="40" class="form-control" required/>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="passconf">Confirm Password</label>
<input type="password" name="passconf" value="" id="passconf" maxlength="40" class="form-control" required/>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="mobile_number">Phone Number</label>
<input type="number" (keypress)="checkIfNumber($event)" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" name="mobile_number" value="" id="mobile_number" class="form-control" maxlength="12" required/>
</div>
<div class="form-group row" style="margin-top:1px">
<select name="timezone" id="timezone" class="form-control selectpicker" data-live-search="true" data-dropup-auto="false" required>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group row" style="margin-top:6px">
<select id="country" name="country" class="form-control selectpicker" data-live-search="true" data-dropup-auto="false" required>
<option value="" disabled selected>Please Select a Country</option>
<option value="227">United States</option>
<option value="39">Canada</option>
</select>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="address1">Address 1</label>
<input type="text" name="address1" value="" id="address1" class="form-control" required/>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="address2">Address 2</label>
<input type="text" name="address2" value="" id="address2" class="form-control" />
</div>
<div class="form-group row label-floating">
<label class="control-label" for="city">City</label>
<input type="text" name="city" value="" id="city" class="form-control" required/>
</div>
<div class="form-group row" style="margin-top:4px">
<select name="state" id="state" class="form-control selectpicker" data-live-search="true" data-dropup-auto="false" required>
<option value="" disabled selected>Please Select a State</option>
</div>
<div class="form-group row label-floating">
<label class="control-label" for="zipcode">Zipcode</label>
<input type="text" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" name="zipcode" value="" id="zipcode" class="form-control" maxlength="10" required/>
</div>
</div>
</div>
<div class="checkbox text-center" style="margin-top:20px;">
</div>
<div class="text-center" style="margin-top:19px;">
<button name="mysubmit" type="submit" id="mysubmit" title="Start Trial" class="btn btn-warning btn-raised mr-1" value="submit">Start Trial</button>
</div>
</form>
</div>
</div>
</section>
<section class="pricing-table">
<div class="container">
<div class="block-heading">
<h1>Payment Plan</h1>
<p>Subscribe for unlimited benefits.</p>
</div>
<div class="row no-gutters">
<div class="col-lg-3">
</div>
<div class="col-lg-6">
<div class="price-table price-table-info center prominent">
<div class="item"> <div class="ribbon">Subscribe</div>
<header class="price-table-header">
<h3> <sup>$</sup>30.00 <sub>/mo.</sub> </h3>
</header></div>
<div class="price-table-body">
<ul class="price-table-list">
<li> Cloud hosting and synchronization.<i class="fas fa-check" style="float: right;"></i></li>
<li> 3 free inspections included.<i class="fas fa-check" style="float: right;"></i></li>
<li> Create custom inspection workflows.<i class="fas fa-check" style="float: right;"></i></li>
<li> 2GB storage.<i class="fas fa-check" style="float: right;"></i></li>
<li> Additional inspections only $10 each.<i class="fas fa-check" style="float: right;"></i></li>
</ul>
<div class="text-center">
<a href="javascript:void(0)" class="btn btn-block btn-raised btn-warning">Buy now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<aside class="ms-footbar">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 ms-footer-col">
<div class="ms-footbar-block text-center">
<div class="ms-footbar-block">
<div class="ms-footbar-title">
<ul class="list-inline">
<li class="list-inline-item">
<a href="index.html">Home</a>
</li>
<li class="list-inline-item">
|
</li>
<li class="list-inline-item">
<a href="page-about.html">About</a>
</li>
<li class="list-inline-item">
|
</li>
<li class="list-inline-item">
<a href="page-features.html">Features</a>
</li>
<li class="list-inline-item">
|
</li>
<li class="list-inline-item">
<a href="page-contact.html">Contact</a>
</li>
<li class="list-inline-item">
|
</li>
<li class="list-inline-item">
<a href="page-login.html">Login</a>
</li>
<li class="list-inline-item">
|
</li>
<li class="list-inline-item">
<a href="index.html#free-trial">Register</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-12 text-center text-md-center">
<ul class="list-inline">
<li class="list-inline-item">
<a href="page-terms.html" target="blank" title="Terms of Use">Terms of Use</a>
</li>
<li class="list-inline-item">
|
</li>
<li class="list-inline-item">
<a href="page-privacy.html" target="blank" title="Privacy Policy">Privacy Policy</a>
</li>
</ul>
</div>
</div>
</div>
</aside>
<footer class="ms-footer">
<div class="container">
<p>© Copyright 2018. <br>All Rights Reserved by BIMS Corp</p>
</div>
</footer>
<div class="btn-back-top">
<a href="#" data-scroll id="back-top" class="btn-circle btn-circle-primary btn-circle-sm btn-circle-raised "> <i class="zmdi zmdi-long-arrow-up"></i>
</a>
</div>
</div>
<div class="ms-slidebar sb-slidebar sb-left sb-style-overlay" id="ms-slidebar">
<div class="sb-slidebar-container">
<header class="ms-slidebar-header">
<div class="ms-slidebar-login">
<a href="page-login.html" class="withripple"> <i class="zmdi zmdi-account"></i> Login</a>
<a href="index.html#free-trial" class="withripple"> <i class="zmdi zmdi-account-add"></i> Register</a>
</div>
<div class="ms-slidebar-title">
<div class="ms-slidebar-t">
<h3>Link Inspect <span>Pro</span> </h3>
</div>
</div>
</header>
<ul class="ms-slidebar-menu" id="slidebar-menu" role="tablist" aria-multiselectable="true">
<li>
<a class="link" href="index.html">Home</a>
</li>
<li>
<a class="link" href="page-about.html">About Us</a>
</li>
<li>
<a class="link" href="page-features.html">Features</a>
</li>
<li class="card" role="tab" id="sch6">
<a class="collapsed" role="button" data-toggle="collapse" href="#sc6" aria-expanded="false" aria-controls="sc6">Industry</a>
<ul id="sc6" class="card-collapse collapse" role="tabpanel" aria-labelledby="sch6" data-parent="#slidebar-menu">
<li>
<a class="dropdown-item" href="inspection-home.html">Home Inspection</a>
</li>
<li>
<a class="dropdown-item" href="inspection-compliance.html">Compliance Inspection</a>
</li>
<li>
<a class="dropdown-item" href="page-coming.html">Commercial Inspection</a>
</li>
<li>
<a class="dropdown-item" href="page-coming.html">Environmental Inspection</a>
</li>
<li>
<a class="dropdown-item" href="page-coming.html">Insurance Inspection</a>
</li>
</ul>
</li>
<li>
<a class="link" href="page-contact.html">Contact Us</a>
</li>
</ul>
<div class="ms-slidebar-social ms-slidebar-block">
<h4 class="ms-slidebar-block-title">Social Links</h4>
<div class="ms-slidebar-social">
</div>
</div>
</div>
</div>
</body>
</html>
1条答案
按热度按时间nbysray51#
因为类
.trial-form-block上有35px的填充，所以必须在移动的屏幕上使用媒体查询处理较小的值。