Bootstrap 容器应该居中时稍微向左倾斜

Question

我在对齐网站内容时遇到问题，因为它总是想向左移动一点。这种困境在移动端表现得淋漓尽致。

如您所见，内容（容器）从中心向左一点。我不知道这是来自 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 &amp; 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 &amp; A"></div>
              <div class="col-xs-12 col-md-6 text-center">
                <p class="lead">Q &amp; 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 &amp; 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 &nbsp; | &nbsp; 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>&copy; 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>

Answer 1

从所有行 ID 中删除您保留的所有自定义 width: 100%;（例如 #bike）。

此外，也删除 float 和 display:block，因为这不是必需的（默认情况下所有 div 都设置为阻止）。

--更新-- ** 将页脚 div 包裹在容器流体 class 中，并从该行中移除 100% 宽度。

----为什么几乎所有元素都被指定为 100% 宽度 btw？ container 和 container-fluid 有默认的宽度值，除非你真的需要，否则我不建议覆盖它们。----

Bootstrap 容器应该居中时稍微向左倾斜

Bootstrap container leans a little left when it should be centered

html

css

twitter-bootstrap

twitter-bootstrap-3

alignment