时间戳

首页 > 解决方案 > 减少一列高度引导

html - 减少一列高度引导

问题描述

我想要实现的是带有引导程序的这样的页脚设计：

在此处输入图像描述

我已经设法设置页脚的左列（红色背景）。问题是，不知何故我无法设置右列（黑色背景）的样式。一旦我将高度设置为 70%，列高就会缩小到内容。我看到这与没有为父容器设置高度有关。但是我怎样才能设置一个固定的高度，并且仍然保持响应能力呢？使用媒体查询？

此外，一旦我将显示设置为包含 2 行（一个带有链接，一个带有白色徽标）的右列的显示，这些行就会显示为彼此相邻的列。如果我不这样做，则内容对齐无效。

谁能帮我解决这个问题？似乎我错过了有关网格系统和显示实用程序的一些重要观点。

这就是它现在的样子：

在此处输入图像描述

这是我的代码：

<footer class="mt-auto" role="contentinfo">
<div class="container-fluid h-100">
    <div class="row footerContainer d-flex h-100">

        <div class="footerLeftCol col-12 col-md-7">

            <div class="row pl-5 justify-content-center">
                <div class="col-12 mt-3 mb-3"><img
                            src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo_white.png"></div>
            </div>

            <div class="row align-items-center text-center">

                <div class="col-12 col-md-6 contactColLeft">
                   
                </div>

                <div class="col-12 col-md-6">
                   
                </div>
            </div>

            <div class="row text-center mt-3 pb-3">
                <div class="col-12">
                    <a><i class="fab fa-instagram fa-lg mr-2"></i></a>
                    <a><i class="fab fa-facebook-square fa-lg"></i></a>
                </div>
            </div>

            <div class="col-md-12 copyright">
                <p class="text-center pt-2">&copy; Copyright <?php echo date( 'Y' );  ?> - All rights
                    reserved.</p>
            </div>

        </div>

        <div class="footerRightCol d-flex col-12 col-md-5">

            <div class="row text-center align-items-center justify-content-center ">
                <div class="col-12 flex-grow-1">
                    <h4> Impressum </h4>
                    <h4> Datenschutz </h4>
                    <h4> Sitemap </h4>
                </div>
            </div>

            <div class="row  flex-grow-1 justify-content-end mr-3 mt-auto text-center">

                <div class="col-6">
                    <h4> Designed by </h4>
                </div>
                <div class="col-6">
                    <img src="<?php echo get_stylesheet_directory_uri()?>/images/logo_fewture.png" style="height: 50px">
                </div>
            </div>
        </div>

    </div>
</div>

标签： htmlcsstwitter-bootstrapbootstrap-4flexbox

解决方案

您可以将第二列设置为并使用anddisplay: flex定义它。flex-direction: columnjustify-content-end

把你的内容放在第二列的div里面，内容就会从底部开始增长。

.box-1 {
  height: 400px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row border border-primary p-2">
    <div class="col-12 col-md-6 border border-secondary box-1">Column 1</div>
    <div class="col-12 col-md-6 border border-secondary d-flex flex-column justify-content-end p-2">
      <div class="border border-danger p-2"/>
        <p>As the content is growing</p>
        <p>Justify content end with</p>
        <p>Flex direction column</p>
        <p>Will make content growing up :)</p>
      </div>
    </div>
  </div>
</div>

推荐阅读