부트 스트랩 - 부모 열의 관계에있는 열의 크기

편집 : 내 문제를 해결했습니다. 하단의 설명.부트 스트랩 - 부모 열의 관계에있는 열의 크기

죄송합니다. 설명하기가 어렵습니다./ 기본 열이 "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 - I 양식의 폭의 변화를 검출하고 요소 클래스 COL-XS를 추가하거나을 자바 스크립트 기능을 사용했다. 그래서 쉽게 ... 효과는 사진을 : http://codepen.io/imcodingideas/pen/QdGwMp?editors=1000을하지만 당신은 내가 여기에 시도 것을 볼 수 있습니다 는

출처

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

이 좀 봐 시도 할 수 있습니다 :

<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

부트 스트랩 - 부모 열의 관계에있는 열의 크기

답변

관련 문제