Bootstrap - размер col в отношении родительского col

EDIT: Я решил свою проблему. Объяснение внизу.Bootstrap - размер col в отношении родительского col

Извините за мой английский, но трудно объяснить:/ Когда базовый столбец принимает размер «md-4» и слишком мал, тогда входной ребенок должен сломать линию и стать 100% шириной. Но если базовый столбец изменит класс на «sm-6», то станет больше, а дочерний элемент должен вернуться в строку.

Как решить эту проблему?

<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-md-4 col-sm-6 col-xs-12" style="background-color: #fbb3b3"> 
 

 
     <form class="form-horizontal"> 
 
      <div class="form-group"> 
 
      <label for="inputEmail" class="col-sm-2 col-xs-2 control-label">Email</label> 
 
      <div class="col-sm-10 col-xs-10"> 
 
       <input type="email" class="form-control" id="inputEmail" placeholder="This input should break line, when is too small"> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="inputPassword" class="col-sm-2 control-label">Password</label> 
 
      <div class="col-sm-10"> 
 
       <input type="password" class="form-control" id="inputPassword" placeholder="But if is enough space it should stay inline"> 
 
      </div> 
 
      </div> 
 
     </form> 
 
     </div> 
 

 
     <div class="col-md-4 col-sm-6 col-xs-12" style="background-color: #76ddf3"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
     </div> 
 

 
     <div class="col-md-4 col-sm-12 col-xs-12" style="background-color: #fcfa96"> 
 
     Try to resize window and you will see what am I talking about. 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</body>

EDIT: солитон - Я яваскрипт функции, которая определяет изменение ширины формы и добавляет класс Col-хз элементов или принять его. Так легко ... Эффект на картинке:

источник

2017-01-17 Invictus

Это потому, что вы используете его неправильно. Я создал кодировщик и исправил это для вас. Ожидайте ответа через 10 минут или меньше. –

Ответы мне не помогли. Я сделал это по-другому. – Invictus

Я рад, что ты смог понять это. Хорошие навыки отладки! –

привет вы можете попробовать это один

<div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-6 col-xs-10 col-xs-offset-1"> 
 
     \t \t <div id="form1" class="panel-body"> 
 
     \t \t \t <form role="form""> 
 

 
     \t \t \t \t <div class="form-group input-group"> 
 
          <span class="input-group-addon"><i class="fa fa-tag" ></i></span> 
 
     \t \t \t \t \t <input class="form-control" type="text" placeholder="Email" /> 
 
     \t \t \t \t </div> 
 
     \t \t \t \t <div class="form-group input-group"> 
 
          <span class="input-group-addon"><i class="fa fa-lock" ></i></span> 
 
     \t \t \t \t \t <input class="form-control" type="password" /> 
 
     \t \t \t \t </div> 
 
     \t \t \t \t <button type="submit" class="btn btn-success" style="width: 30%;">Login</button> 
 
         <hr> 
 
         <a href="forgot_password.php">Forgot Password?</a> 
 
     \t \t \t </form> 
 
     \t \t </div> 
 
     \t </div>

источник

2017-01-17 00:50:23 Baguhan

посмотрите на это: http://codepen.io/imcodingideas/pen/QdGwMp?editors=1000, но вы можете увидеть, что я пытался здесь :

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-xs-12 col-sm-6 col-md-4" style="background-color: #fbb3b3"> 
     <form class="form-inline"> 
     <div class="form-group"> 
      <label for="exampleInputName2">Name</label> 
      <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> 
     </div> 
     <div class="form-group"> 
      <label for="exampleInputEmail2">Email</label> 
      <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]"> 
     </div> 
     </form> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-4" style="background-color: #76ddf3"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, inventore facere eius, corporis dicta reiciendis consequatur, consequuntur rem perferendis obcaecati maiores odit commodi officiis ratione accusamus necessitatibus.</p> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-4" style="background-color: #fcfa96"> 
     <p>Try to resize window and you will see what am I talking about.</p> 
    </div> 
    </div> 
</div>

Это то, что вы пытаетесь сделать? Помните, что теги p являются элементами уровня блока.

источник

2017-01-17 00:55:21

Bootstrap - размер col в отношении родительского col

ответ

Смежные вопросы