2017-06-20 125 views
0

是否有减少在自举中显示的截面的高度?Bootstrap调整截面高度

我要让高度的3/4部分所以下面的内容是相同的屏幕

所有部分占用屏幕的整个长度在目前可见的。

<!-- Intro Section --> 
<section id="intro" class="intro-section"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-12"> 
       <div class="col-lg-12 main_text"> 
       </div> 
       <div class="col-lg-1 "> 
        <img class="logofirst" src="../logo/logo.png"> 
       </div>  

      </div> 
     </div> 
    </div> 
</section> 





<!-- About Section --> 
<section id="about" class="about-section"> 
    <div class="container"> 
     <div class="row"> 
      <div class= "col-lg-12 panel-body"> 
       <div class="panel panel-default"> 
        <div class="panel-body"> 
        <h1>OUR MISSION: </h1> 
        </div> 
       </div> 

        <div class ="col-lg-4"> 
       <h1>TO CARE</h1> 
       <IMG class = "icons" SRC="icons/heart.png"> 
       <P class="icontext">WE ARE HERE TO HELP, ADVISE AND TO LISTEN 
       </p> 
       </div> 
       <div class ="col-lg-4"> 
       <h1>TO INSPIRE</h1> 
       <IMG class = "icons" SRC="icons/hat.png"> 
       <P class="icontext">PROVIDING VERY HIGH CALIBRE PRODUCTS.</P> 

       </div> 
       <div class ="col-lg-4"> 
       <h1>TO PROVIDE</h1> 
       <IMG class = "icons" SRC="icons/box.png"> 
       </P> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

<!-- Services Section --> 
<section id="services" class="services-section"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-12"> 
       <h1>Fundraising Goal:</h1> 
       <h2 class="fundraise">$5,000</h2> 
        <div class="progress"> 
         <div class="progress-bar" style="width: 1%;"> 
          1% 
         </div> 
        </div> 
        A total of <b class="donation_amount">$0.00</b> has been raised so far. 
      </div> 

     </div> 
    </div> 
</section> 
+0

你想调整高度的哪个部分?请包含足够的代码以提供适用的评估。 – Ryan

+0

@Ryan完成。第一个介绍部分 –

回答

0

有几个不同的方法来做到这一点:

  1. 设置的高度/最大高度为.logofirst元素,并限制在介绍部分的内容。

  2. #intro div上设置高度/最大高度。

最终,你走的路线完全取决于你的最终目标和将驻留在页面上的内容。