我无法调整网站的内容，因为它总是想要向左边走一点。这种困境在移动视图中脱颖而出。
正如您所看到的，内容（容器）离中心稍远一点。我不知道这是来自Bootstrap，我的CSS还是HTML本身。我已经搞乱了我的CSS中的浮动，我设法移动它，但它移动到右边！我想以此为中心。
@charset "utf-8";
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
http://www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video {
max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}
body {
background-color: white;
margin-top: 30px;
}
hr {
border: 0;
clear: both;
display: block;
width: 100%;
background-color: #D0D0D0;
height: 3px;
}
a.footerText:hover {
color: #999;
}
a.socialIcons {
margin: 10px;
opacity: .6;
filter: alpha(opacity=60);
}
a.socialIcons:hover {
opacity: .8;
filter:alpha(opacity=80); /* For IE8 and earlier */
}
/*
Dreamweaver Fluid Grid Properties
----------------------------------
dw-num-cols-mobile: 5;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 10;
dw-gutter-percentage: 10;
Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
*/
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: auto;
/* padding-left: 0.8272%;
padding-right: 0.8272%; */
}
#LayoutDiv1 {
clear: both;
display: block;
float: left;
width: 100%;
height: 100%;
}
#header {
clear: both;
width: 100%;
height: 100%;
display: block;
float: left;
position: relative;
}
#bikes {
clear: both;
width: 100%;
display: block;
float: left;
padding: 10% 0;
}
#trips {
clear: both;
width: 100%;
max-height: 100%;
display: block;
float: left;
padding: 10% 0;
}
#seminars {
clear: both;
width: 100%;
display: block;
float: left;
padding: 10% 0;
}
#faq {
clear: both;
width: 100%;
display: block;
float: left;
padding: 10% 0;
}
#footer {
clear: both;
float: left;
width: 100%;
display: block;
text-align: center;
padding-top: 15px;
}
.footerText {
color: #999;
font-size: 1em;
padding-top: 3%;
padding-bottom: 3%;
text-align: center;
}
a.footeraltText:hover {
text-decoration: none;
}
.yungText {
color: #7d7d7d;
font-size: .9em;
margin: 3% 2%;
text-align: center;
line-height: 20px;
letter-spacing: 1px;
}
.crossOut {
text-decoration: line-through;
}
.socialIconGroup {
padding-bottom: 5%;
}
.navbar {
border-bottom: 1px solid #999;
}
.bikeCatalog {
padding: 10% 0;
}
.catalogItem {
text-align: center;
}
.catalogItem img {
display: block;
margin-left: auto;
margin-right: auto;
}
.nav-divider {
height: 50px;
border-left: 1px solid #999;
border-right: 1px solid #FFF;
}
.carouselImage {
width: 100%;
max-height: 100%;
}
#cycleLogo {
height: 50px;
}
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: auto;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
height: 100%;
display: block;
}
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#navbar {
float: right;
}
#bikes {
clear: none;
float: left;
width: 100%;
display: block;
}
#trips {
clear: none;
float: left;
width: 100%;
display: block;
}
#seminars {
clear: none;
float: left;
width: 100%;
display: block;
}
#faq {
clear: none;
float: left;
width: 100%;
display: block;
}
#footer {
clear: both;
float: left;
width: 100%;
display: block;
}
@media only screen and (min-width: 769px) {
.gridContainer {
width: auto;
margin: auto;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
height: 100%;
display: block;
}
#navbar {
float: right;
}
#bikes {
clear: both;
float: left;
width: 100%;
display: block;
text-align: left;
}
#trips {
clear: both;
float: left;
width: 100%;
display: block;
}
#seminars {
clear: both;
float: left;
width: 100%;
display: block;
}
#faq {
clear: both;
float: left;
width: 100%;
display: block;
}
#footer {
clear: both;
float: left;
width: 100%;
display: block;
}
} <!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="author" content="Gabe Petersen, Reagan Jones, Cycle Fitness, FBLA">
<meta name="description" content="Website for Cycle Fitness, a new company opening up in New York City. Our shop’s address is 123 Avenue of the Americas, New York, NY 20013. Our welcoming store sells a variety of bicycles, including road bikes, mountain bikes, cyclocross bikes, folding bikes, electric-assist bikes, women’s bikes, children bikes, etc. The owner also plans to have seminars on bike safety, cycling for fitness, choosing the right bike, etc., as well as have monthly cycle trips in and out of the city. We are happy to answer any questions about your bikes as well as ours. ">
<link rel="icon" href="../../favicon.ico">
<title>Cycle Fitness</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="https://dl.dropbox.com/s/dm01umt3yoin2uz/bootstrap.css?dl=0" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://dl.dropbox.com/s/o8oorcl1tdp2r5w/bootstrap.min.css?dl=0" rel="stylesheet">
<link href="css/fluid_index.css" rel="stylesheet">
<link href="https://dl.dropbox.com/s/7i775ga1haacy5d/fluid_index.css?dl=0" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Cycle Fitness</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="https://dl.dropbox.com/s/fgr66qrbrnzdnbr/bikes.html?dl=0">Bikes</a></li>
<li><a href="https://dl.dropbox.com/s/d5skwprpwa0n6yy/trips.html?dl=0">Trips</a></li>
<li><a href="https://dl.dropbox.com/s/qy3ihosg3vwq2xb/seminars.html?dl=0">Seminars</a></li>
<li><a href="https://dl.dropbox.com/s/1klmf3mwremeuac/faq.html?dl=0">Q & A</a></li>
<li><a href="#footer">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="header"><img src="https://dl.dropbox.com/s/cow71e5bfnnjo31/homeheader.jpg?dl=0" name="imagewrapper" class="imagewrapper"/></div>
<div class="container-fluid">
<div id="bikes" class="row">
<div class="col-xs-2 col-md-3"></div>
<div class="col-xs-8 col-md-6">
<div class="row">
<div class="col-xs-12 col-md-6"><img src="https://dl.dropbox.com/s/o7o73pyqi5k27qm/thumbtree.jpg?dl=0" class="img-rounded" alt="Bikes"></div>
<div class="col-xs-12 col-md-6 text-center">
<p class="lead">Bikes</p>
<p class="yungText"> In the shop, you will notice that we carry a wide variety of bikes that are quality selected to fit each of our customers needs. Whether you are just starting out or you ride professionally, our staff will always be able to help.</p>
<a href="https://dl.dropbox.com/s/fgr66qrbrnzdnbr/bikes.html?dl=0">
<button type="button" class="btn btn-default btn-lg footerText">
Catalog
</button>
</a>
</div>
</div>
</div>
<div class="col-xs-2 col-md-3"></div>
</div>
<div id="trips" class="row">
<div class="col-xs-2 col-md-3"></div>
<div class="col-xs-8 col-md-6">
<div class="row">
<div class="col-xs-12 col-md-6"><img src="https://dl.dropbox.com/s/rai794ad7fyew0t/thumbsunset.jpg?dl=0" class="img-rounded" alt="Trips"></div>
<div class="col-xs-12 col-md-6 text-center">
<p class="lead">Trips</p>
<p class="yungText">Here at Cycle Fitness, we are not limited to selling bikes, but we also get communities involved: by having trips in and out of Manhattan. We expose many cyclists to different enviroments, while keeping safety top priority.</p>
<a href="https://dl.dropbox.com/s/d5skwprpwa0n6yy/trips.html?dl=0">
<button type="button" class="btn btn-default btn-lg footerText">
Schedule
</button>
</a>
</div>
</div>
</div>
<div class="col-xs-2 col-md-3"></div>
</div>
<div id="seminars" class="row">
<div class="col-xs-2 col-md-3"></div>
<div class="col-xs-8 col-md-6">
<div class="row">
<div class="col-xs-12 col-md-6"><img src="https://dl.dropbox.com/s/a2v5b8cp8ll5wpw/thumbclouds.jpg?dl=0" alt="Seminars" class="img-rounded"></div>
<div class="col-xs-12 col-md-6 text-center">
<p class="lead">Seminars</p>
<p class="yungText">Along with getting the community active with cycling trips, we also offer free seminars on preparation for many different aspects of cycling.</p>
<a href="https://dl.dropbox.com/s/qy3ihosg3vwq2xb/seminars.html?dl=0">
<button type="button" class="btn btn-default btn-lg footerText">
Dates
</button>
</a>
</div>
</div>
</div>
<div class="col-xs-2 col-md-3"></div>
</div>
<div id="faq" class="row">
<div class="col-xs-2 col-md-3"></div>
<div class="col-xs-8 col-md-6">
<div class="row">
<div class="col-xs-12 col-md-6"><img src="https://dl.dropbox.com/s/djn5c6i1r20jdzs/thumbbeach.jpg?dl=0" class="img-rounded" alt="Q & A"></div>
<div class="col-xs-12 col-md-6 text-center">
<p class="lead">Q & A</p>
<p class="yungText">All of your questions are considered with great respect, and we reply to all of them. If they are asked frequently, they are put on our Q & A for your convienence.</p>
<a href="https://dl.dropbox.com/s/1klmf3mwremeuac/faq.html?dl=0">
<button type="button" class="btn btn-default btn-lg footerText">
Go to
</button>
</a>
</div>
</div>
</div>
<div class="col-xs-2 col-md-3"></div>
</div>
</div>
<!-- end container-fluid -->
</div>
<div id="footer" class="row">
<div class="col-xs-12 col-md-6 socialIconGroup">
<a class="socialIcons" href="https://www.facebook.com/becyclefit" title="like us on facebook" alt="facebook icon"><img src="https://dl.dropbox.com/s/pbyk2eho1lqrmzq/Social%20icons%20by%20Dreamstale%20%286%29.png?dl=0"></a>
<a class="socialIcons" href="https://twitter.com/becyclefit" title="follow us on twitter" alt="twitter icon"><img src="https://dl.dropbox.com/s/y1gbz3rkcnj4ndn/Social%20icons%20by%20Dreamstale%20%283%29.png?dl=0"></a>
<a class="socialIcons" href="https://plus.google.com/117298972535280093370/about" title="follow us on google+" alt="google plus icon"><img src="https://dl.dropbox.com/s/gfclggry33ya2qr/Social%20icons%20by%20Dreamstale%20%2827%29.png?dl=0"></a>
<a class="socialIcons" href="http://becyclefit.tumblr.com/" title="follow us on tumblr" alt="tumblr icon"><img src="https://dl.dropbox.com/s/d9bogu5ez71nbbb/Social%20icons%20by%20Dreamstale%20%2813%29.png?dl=0"></a>
</div>
<div class="col-xs-12 col-md-6">
<p><a class="footerText" href="#footer">9am - 5pm | Mon - Sat</a></p>
<p><a class="footerText" href="https://www.google.com/maps/place/123+Avenue+of+the+Americas,+New+York,+NY+10013/@40.7239272,-74.0046749,17z/data=!3m1!4b1!4m2!3m1!1s0x89c2598c9bd1a0e5:0x80cfad7a5ba7a114">123 Avenue of the Americas, New York</a></p>
<p><a class="footerText" href="mailto:becyclefit@gmail.com">becyclefit@gmail.com</a></p>
<p><a class="footerText" href="tel://(555) 555-5555">(555) 555-5555</a></p>
</div>
<div class="row">
<div class="col-xs-12 footerText"><p>© Gabe A. Petersen 2015</p></div>
</div>
</div>
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://dl.dropbox.com/s/6zgznegu8x995bs/bootstrap.min.js?dl=0"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
答案 0 :(得分：0)
从您的所有行ID中删除您保留的所有自定义width: 100%;（例如#bike）。
此外，请删除float和display:block，因为不需要（默认情况下所有div都设置为阻止）。
- UPDATE-- **将您的页脚div包裹在容器流体类中，并从该行中移除100％宽度。
----为什么几乎所有元素都被指定为100％宽度btw？容器和容器流体具有默认的宽度值，除非你真的需要，否则我不建议覆盖它们.----