时间戳

首页 > 解决方案 > Col 6 面板对齐问题

html - Col 6 面板对齐问题

问题描述

首次体验引导程序。想要使用 col-lg-6 类彼此相邻的 2 个面板。左侧面板将是文章的链接，同时持有图像。右边将是一个注册/登录框。加载站点时，2 面板位于下方？

<div class="row">
            <div class="col-lg-6">
                <h2>Lastest News</h2>
                <p>Article</p>
                <div class="panel panel-default">
                <div class="panel-heading">Panel Header</div>
                <div class="panel-body"><img class="img-responsive" src="images/warning.png"</div>
            </div>
        </div>
            <div class="col-lg-6">
                <form action="/action_page.php">
                    <h2>Buy, Sell and more deals!</h2>
                    <div class="form-group">
                        <label for="email">Email address:</label>
                        <input type="email" class="form-control" id="email">
                    </div>
                    <div class="form-group">
                        <label for="pwd">Password:</label>
                        <input type="password" class="form-control" id="pwd">
                    </div>
                    <div class="checkbox">
                        <label><input type="checkbox"> Remember me</label>
                    </div>
                    <ul class="nav navbar-nav navbar-center">
                        <li>
                            <button class="navbutton"> 
                                Login
                            </button>
                        </li>
                        <li>
                            <p> Not with us yet? </p>
                        </li>
                        <li>
                            <button class="navbutton"> 
                                Sign Up
                            </button>
                        </li>
                    </ul>
                </form>
            </div>
        </div>
    </div>

这一切都在一个容器内。

在添加 img 之前

添加img后

标签： htmlcssbootstrap-4

解决方案

请使用此 HTML

<div class="row">
    <div class="col-lg-6">
        <h2>Lastest News</h2>
        <p>Article</p>
        <div class="panel panel-default">
            <div class="panel-heading">Panel Header</div>
            <div class="panel-body">
            <img class="img-responsive" src="images/warning.png"/>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <form action="/action_page.php">
            <h2>Buy, Sell and more deals!</h2>
            <div class="form-group">
                <label for="email">Email address:</label>
                <input type="email" class="form-control" id="email">
            </div>
            <div class="form-group">
                <label for="pwd">Password:</label>
                <input type="password" class="form-control" id="pwd">
            </div>
            <div class="checkbox">
                <label><input type="checkbox"> Remember me</label>
            </div>
            <ul class="nav navbar-nav navbar-center">
                <li>
                    <button class="navbutton"> 
                                Login
                            </button>
                </li>
                <li>
                    <p> Not with us yet? </p>
                </li>
                <li>
                    <button class="navbutton"> 
                                Sign Up
                            </button>
                </li>
            </ul>
        </form>
    </div>
</div>

推荐阅读