Bootstrap-размер col по отношению к родительскому col

EDIT: я решил свою проблему. Объяснение внизу.

Извините за мой английский, но это трудно объяснить :/
Когда основной столбец принимает размер» 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: Solition — я использовал функцию javascript, которая определяет изменение ширины формы и добавляет класс col-xs к элементам или принимает его. Так легко… Эффект на картинке:
РАЗРЕШЕННЫЙ

2 ответа

  1. привет вы можете попробовать это

    <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-6 col-xs-10 col-xs-offset-1">
            		<div id="form1" class="panel-body">
            			<form role="form"">
    
            				<div class="form-group input-group">
                                <span class="input-group-addon"><i class="fa fa-tag"  ></i></span>
            					<input class="form-control" type="text" placeholder="Email" />
            				</div>
            				<div class="form-group input-group">
                                <span class="input-group-addon"><i class="fa fa-lock"  ></i></span>
            					<input class="form-control" type="password" />
            				</div>
            				<button type="submit" class="btn btn-success" style="width: 30%;">Login</button>
                            <hr>
                             <a href="forgot_password.php">Forgot Password?</a>
            			</form>
            		</div>
            	</div>

  2. взгляните на это: 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="jane.doe@example.com">
            </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 теги являются элементами уровня блока.