Question

无论如何都要降低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>

Answer 1

有几种不同的方法可以做到这一点：

设置<select (change)="handle(selectField.value);" #selectField>元素的高度/最大高度，并限制介绍部分中的内容。
在.logofirst div上设置身高/最高身高。

最终，你走的路线完全取决于你的最终目标和页面上的内容。

Bootstrap调整截面高度

1 个答案: