Question

嘿伙计们和gals我是新手使用bootstrap而我正在尝试做一些非常简单但现在正在逃避我的事情。我试图使我的jumbotron与放在它上面的图片大小相同。

        <div class="container">
           <div class="row">
              <div class="col-xs-12">
                 <img src="img/NYC Skyline.jpg" class="img-responsive" alt="Responsive image">
              </div><!-- pic of NYC -->
           </div>
           <div class="row">
              <div class="jumbotron" class="col-xs-12">
                 <h1>Welcome to Falke!</h1>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
                 <a href="#" class="btn btn-large btn-info">Get Started</a>
                 </div><!-- end of container for hero unit for blurb-->
              </div>
        </div>

我遇到的问题是，超大屏幕将超出放置在其上方的图片的最大宽度。我怎么能避免这种情况发生，谢谢。我正在使用bootstrap 3.

Answer 1

你需要将jumbotron div包装在一个div div中，而不是将一个列类添加到jumbotron中。请参阅以下代码：

<div class="row">
     <div class="col-xs-12">
          <div class="jumbotron">
             <h1>Welcome to Falke!</h1>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
             <a href="#" class="btn btn-large btn-info">Get Started</a>
        </div><!-- end of jumbotron-->
     </div>
   </div>

如何使一个jumbotron与Bootstrap 3中的图片宽度相同

1 个答案: