ブートストラップ - 親カラムとの関係でのcolのサイズ

EDIT：私の問題を解決しました。下部に説明があります。ブートストラップ - 親カラムとの関係での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：Solition - 私は、フォームの幅の変化を検知するjavascript関数を使用して要素にクラスCOL-XSを追加するか、またはそれを取ります。だから、簡単に...絵の効果：

出典

2017-01-17 Invictus

あなたが間違って使っているからです。私はcodepenを作成し、あなたのためにこれを修正します。 10分以内に答えを期待してください。 –

回答は私を助けませんでした。私は別にそれをやった。 – Invictus

私はあなたがそれを理解することができてうれしいです。良いデバッグスキル！ –

やあ、あなたはこの1

<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

ブートストラップ - 親カラムとの関係でのcolのサイズ

答えて

関連する問題