文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS Bootstrap Row Flex和显示问题

问CSS Bootstrap Row Flex和显示问题
EN

Stack Overflow用户

提问于 2017-07-10 23:10:23

回答 1查看 897关注 0票数 0

我试图建立一个简单的网页与2列-md-6，他们需要相同的高度，而不是设置高度。我已经添加了样式显示flex到行，所以它现在是等高的，它只是在我的col md-6中的元素在起作用。

在第二个col-md-6中，我有一个很长的HTML表单，这将决定另一个col-md-6的长度(目前是这样的)。在我的第一列-md-6是在2个部分，第一部分是由一个标志和文字，第二部分将是背景图像，我想占据其余的高度。做这件事最好的方法是什么？

这是我到目前为止所做的，

<div class="container-fluid">

    <div class="row" style="display: flex;">

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

                <div class="info">

                    <!-- Logo and Text -->

                </div>

                <div class="background">

                    <!-- Background Image -->

                </div>


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

                <!-- Long Form Here -->


            </div>      

    </div>


</div>

html

twitter-bootstrap

css

flexbox

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-07-10 23:40:19

还可以使用flex-direction:column制作第一个col-md-6 display:flex。背景图像div.上的使用flex-grow:1。

https://www.codeply.com/go/rhOBREngxT

<div class="container-fluid">
    <div class="row bg-info" style="display: flex;">
            <div class="col-md-6" style="display: flex;flex-direction:column">
                <div class="info">
                    Logo and Text
                </div>
                <div class="background">
                    Background
                </div>
            </div>
            <div class="col-md-6">

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45015643

复制

相似问题

问CSS Bootstrap Row Flex和显示问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS Bootstrap Row Flex和显示问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS Bootstrap Row Flex和显示问题
EN