Html 如何使用引导适应div中的文本输入？

我正在使用引导创建表单，文本输入宽度太长。我试图在bootstrap.css中设置类

窗体控件的
宽度=35%
，它看起来还可以，但当我调整屏幕大小时，它与另一个
重叠。现在我把它改回100%。而且它太长，并且与另一个重叠

这是我的密码：

<div class="col-sm-10">    
    <div class="col-sm-12">
        <div class="col-sm-6">
            <h4>LOGIN</h4>
            <div class="panel panel-default" style="border: solid 2px black">
                <div class="panel-body" style="min-height: 456px">
                    <div class="row">
                        <div class="container">
                            <div class="col-sm-12">
                                <form role="form">
                                    <div class="form-group">
                                        <h4>REGISTER</h4>
                                        <p>Please login to take advantage of promotions and benefits reserved to registered users.</p>
                                    </div>

                                    <div class="form-group" style="margin-top: 35px">
                                        <h5>EMAIL ADDRESS* </h5>
                                        <input type="text" class="form-control" />
                                    </div>

                                    <div class="form-group">
                                        <h5>PASSWORD* </h5>
                                        <input type="password" class="form-control" />
                                    </div>

                                    <div class="form-group">
                                        <span><input type="checkbox" style="margin-top: 20px" /></span><span>&nbsp;Remember me next time</span>
                                    </div>

                                    <div class="form-group">
                                        <span>
                                            <button type="button" class="btn btn-default" onclick="location.href='register.html'" >REGISTER NOW</button>
                                        </span>
                                        <span>
                                            <a href="#" data-featherlight="#fl2" data-featherlight-variant="fixwidth">Forgot your password?</a>
                                        </span>
                                    </div>

                                </form>

                            </div>

                        </div>
                    </div>

                </div>

            </div>
        </div>

        <div class="col-sm-6">
            <h5>&nbsp;</h5>
            <div class="panel panel-default" style="border: solid 2px black">
                <div class="panel-body" style="min-height: 456px">
                    <h5>NEW USER</h5>
                    <div class="register-notify">

                        <p>Register now and enjoy the benefits of My Account. Only registered users can:</p>
                        <p>- Access to your personal information through My Account</p>
                        <p>- Use the Wish List to save their favorite products</p>
                        <p>- Complete the checkout process more quickly</p>

                    </div>

                    <div style="margin-top: 150px">
                        <input type="button" value="REGISTER NOW"  class="register-button" onclick="location.href='register.html'" />
                    </div>
                </div>
            </div>
        </div>
</div> 


登录
登记
请登录以利用为注册用户保留的促销和优惠

电子邮件地址*
密码*
下次记得我吗
现在注册
新用户
现在注册并享受我的帐户的好处。只有注册用户才能：

-通过我的帐户访问您的个人信息

-使用愿望列表保存他们喜爱的产品

-更快地完成签出过程

将
div
标记的类别更改为
col-sm-6
。这应该能奏效

<div class="container">
    <div class="col-sm-6"> <!--The div tag before the form-->
        <form role="form">



查看演示。
将
div
标记的类别更改为
col-sm-6
。这应该能奏效

<div class="container">
    <div class="col-sm-6"> <!--The div tag before the form-->
        <form role="form">



查看演示