Question

我有绿色和蓝色div，我想把它分成两个。我已经尝试过使用它但是没有用。有人能帮我吗？

这是我的代码：

<div class="row">
    <div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
        <div class="row">
            <div class="col-lg-6" style="background: #008080;">
                <form role="form" method="post" action="<?=base_url()?>login/login_submit">
                    <h2>Please Sign In</h2>
                    <div class="form-group">
                        <input type="text" name="username" id="email" class="form-control input-lg" placeholder="Username">
                    </div>
                    <div class="form-group">
                        <input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password">
                    </div>
                    <span class="button-checkbox">
                        <input type="checkbox" name="remember_me" id="remember_me" checked="checked" class="hidden">
                        <a class="btn" data-color="info">Stay Signed In</a>
                        <a href="<?=base_url()?>login/forgotpassword" class="btn btn-link pull-right">Forgot Password?</a>
                    </span>
                    <div class="row">
                        <div class="col-xs-6 col-sm-6 col-md-6">
                            <input type="submit" class="btn btn-lg btn-success btn-block" value="Sign In">
                        </div>
                    </div>  
                </form>
            </div>
            <div class="col-lg-6" style="background: #009926">
                <p>Hello World!</p>
            </div>
        </div>
    </div>
</div>

到目前为止这是我的输出： https://prnt.sc/h52st4

非常感谢！

Answer 1

您需要为不同的屏幕分辨率添加类。使用col-lg-6类添加这些类。例如

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background: #009926">
        <p>Hello World!</p>
    </div>

您的整个代码将如下所示

<div class="row">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background: #008080;">
        <form role="form" method="post" action="<?=base_url()?>login/login_submit">
            <h2>Please Sign In</h2>
            <div class="form-group">
                <input type="text" name="username" id="email" class="form-control input-lg" placeholder="Username">
            </div>
            <div class="form-group">
                <input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password">
            </div>
            <span class="button-checkbox">
                <input type="checkbox" name="remember_me" id="remember_me" checked="checked" class="hidden">
                <a class="btn" data-color="info">Stay Signed In</a>
                <a href="<?=base_url()?>login/forgotpassword" class="btn btn-link pull-right">Forgot Password?</a>
            </span>
            <div class="row">
                <div class="col-xs-6 col-sm-6 col-md-6">
                    <input type="submit" class="btn btn-lg btn-success btn-block" value="Sign In">
                </div>
            </div>  
        </form>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background: #009926">
        <p>Hello World!</p>
    </div>
</div>

还包括bootstrap css以查看结果。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

两列不起作用

1 个答案: