Question

使用bootstrap的第一次体验。想要使用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>

这都在容器内。

Before adding img

After adding img

Answer 1

请使用此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>

第6组小组协调问题

1 个答案: