Javascript 两列不工作

我有绿色和蓝色的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>

您需要为不同分辨率的屏幕添加类。将这些类添加到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>


当你说“将它分成两部分”时，你能更具体地解释一下你的意思吗？水平或垂直除以2，请说明这是一个引导问题，所以我删除了html作为它的无关内容。如果你使用了引导类，那么输出与你共享的不一样。请更具体一点，创建一个JSFIDLE或jsbin来清除reference@RainLai对不起，它是垂直的。顺便说一下，已经修好了。非常感谢你，它很有效！非常感谢，先生！非常感谢。：）
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >