Question

出于某种原因，当我从头开始时，所有内容都正确排列正确但正如您将在下面的代码中看到的那样，每个元素的侧面都会添加额外的空间，特别是底部的三个元素，并且它们不会占用全部容器上的空间。顶部跨度10偏移1元素几乎被推到右侧，并且应该有1个空间。底部的三个元素都有一个偏移量1所以3 + 1 = 4所以它应该填满整个容器但是有空间就像有一个排水沟那样不应该！是。我试图把这描述为最好的我希望你能理解并且可以为我提供一个其他明智的答案我将不得不从头开始。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
  </head>

  <body>
    <div class="container" id="container">

        <div class="span10 offset1">
        <img src="http://lorempixel.com/960/200/food" class="img-rounded" />
        </div><!--end spand 10-->

        <div class="span10 offset1">
            <div id="myCarousel" class="carousel slide">
              <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
              </ol>
              <!-- Carousel items -->
              <div class="carousel-inner" id="carousel">
                <div class="active item">
                    <img src="http://lorempixel.com/960/400/food" />
                </div>
                <div class="item">
                    <img src="http://lorempixel.com/960/400/food" />
                </div>
                <div class="item">
                    <img src="http://lorempixel.com/960/400/food" />
                </div>
              </div>
              <!-- Carousel nav -->
              <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
              <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
            </div><!--end carousel-->
        </div><!--end spand 12-->

        <div class="row">
            <div class="span3 offset1">
                <a href="About Us.html">
                <img src="http://lorempixel.com/200/200/food" class="img-polaroid">
                </a>
            </div>
            <div class="span3 offset1">
                <a href="#">
                <img src="http://lorempixel.com/200/200/food" class="img-polaroid">
                </a>
            </div>
            <div class="span3 offset1">
                <a href="#">
                <img src="http://lorempixel.com/200/200/food" class="img-polaroid">
                </a>
            </div>  
        </div>        

    </div><!-- end container-->




    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
  </body>
</html>


  [1]: http://i.stack.imgur.com/5imVw.png

Bootstrap Grid不对齐

0 个答案: