Question

我希望将我的旋转木马和导航栏保持在屏幕中间的75％，这样我就可以用网格打开屏幕了。我不能在小提琴上再创造它，但如果你把它放在你当地你会看到;截图： enter image description here 在图片顶部看到“块4”，这是col开始的地方

  <div class="col-sm-3">col1 </div>
  <div class="col-xs-12 col-sm-6"> Carousel goes here </div>
  <div class="col-sm-3">col3 </div>

问题是我的图像溢出到第3列，我怎样才能让旋转木马停留在我的中间单元格？

以下完整代码

   <body>
        <!--rows and cols structure -->
        <div class="row">
          <div class="col-sm-3">block1 </div>
          <div class="col-xs-12 col-sm-6">     

            <!--carouselstart-->
            <div class="container page-content">
                <div class="hero row">
                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                      <!-- Indicators -->
                      <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                      </ol>

                      <!-- Wrapper for slides -->
                      <div class="carousel-inner" role="listbox">
                        <div class="item active">
                          <img src="img/image1.jpg" alt="image 1 missing" title="Image 1">
                          <div class="carousel-caption">
                            <h3>caption1</h3>
                          </div>
                        </div>

                        <div class="item">
                          <img src="img/image2.jpg" alt="image 2 missing" title="Image 2">
                          <div class="carousel-caption">
                            <h3>caption 2</h3>
                          </div>
                        </div>

                        <div class="item">
                          <img src="img/image3.jpg" alt="image 3 missing" title="Image 3">
                          <div class="carousel-caption">
                            <h3>caption 2</h3>
                          </div>
                        </div>
                      </div>

                      <!-- Controls -->
                      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                      </a>
                      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                      </a>
                    </div>
                </div> <!--end hero -->
            </div><!--end of container-->
<!--nav bar goes here-->
          <div class="col-sm-3">block4</div>

UPDATE .... 我使用thr chrome dev工具来改变一些css，发现如果我将下面的设置设置为100％那么它就完全适合了。我该怎么做呢？ enter image description here

右侧网格col

0 个答案: