JavaScript — два столбца не работают

Question

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>

И это мой вывод:
https://prnt.sc/h52st4

Большое спасибо!

-1

css javascript jquery php twitter-bootstrap-3

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Вам нужно добавить классы для разных разрешений экрана. Добавьте эти классы с вашим классом 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>

Также включите начальную загрузку CSS, чтобы увидеть результат.

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

0