부트 스트랩 4 - 열회수 없음

-1

브라우저 크기를 조정할 때 B4 열이 줄 바꿈되지 않도록해야합니다. 여기 내 코드입니다 :부트 스트랩 4 - 열회수 없음

<div class="card card-outline-primary"> 
<div class="card-block"> 
    <form class="row"> 
     <div class="col-xs-4" style="border:solid;border-color:red;border-width:5px;"> 
      <label for="visualTheme" class="control-label">1234</label> 
      <div> 
       <input class="form-control" style="height:30px;"/> 
      </div> 
     </div> 
     <div class="col-xs-4" style="border:solid;border-color:blue;border-width:5px;"> 
      <label class="control-label">5678</label> 
      <div> 
       <input class="form-control" style="height:30px;" /> 
      </div> 
     </div> 
     <div class="col-xs-4" style="border:solid;border-color:green;border-width:5px;"> 
      <label class="control-label">abcd</label> 
      <div> 
       <input class="form-control" style="height:30px;" /> 
      </div> 
     </div> 
    </form> 
</div>

Fiddle

하지만 그것은 작게 만들 때 여전히 래핑합니다.

도움 주셔서 감사합니다.

출처

2017-04-20 Mark

당신은 그들이 낮은 크기의 "스택"... 다른 위에 하나에 시작하는 방식을 의미? – mayersdesign

정확한 요구 사항은 무엇입니까? –

@mayersdesign - 예. 내 요구 사항은 오른쪽에있는 열이보기에서 사라지 자 마자 가로 막대를 표시하는 것입니다. 다른 말로 반응을 줄이십시오. – Mark

col-xs-*클래스는 부트 스트랩 4에서 지원되지 않습니다. col-xs-*이 부트 스트랩에 사용되었습니다. 3따라서 부트 스트랩 4의 대체은 col-*입니다.

그래서 col-xs-4 클래스는 부트 스트랩 4에서 작동하지 않습니다. 대신 col-4을 사용하십시오.

다음은 코드가있는 코드입니다. "포장"으로

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="card card-outline-primary"> 
 
    <div class="card-block"> 
 
    <form class="row"> 
 
     <div class="col-4" style="border:solid;border-color:red;border-width:5px;"> 
 
     <label for="visualTheme" class="control-label">1234</label> 
 
     <div> 
 
      <input class="form-control" style="height:30px;" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-4" style="border:solid;border-color:blue;border-width:5px;"> 
 
     <label class="control-label">5678</label> 
 
     <div> 
 
      <input class="form-control" style="height:30px;" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-4" style="border:solid;border-color:green;border-width:5px;"> 
 
     <label class="control-label">abcd</label> 
 
     <div> 
 
      <input class="form-control" style="height:30px;" /> 
 
     </div> 
 
     </div> 
 
    </form> 
 
    </div>

출처

2017-04-20 11:07:50

나는 본다. 예, 더 이상 열을 감싸고 있지 않습니다. 그러나 가로로 크기를 조정하면 열의 너비가 줄어 듭니다. 그건 내가 원하는 것이 아니야. 대신에 가로 막대가 필요합니다. 어떤 생각? – Mark

당신은 공간의 왼쪽과 오른쪽 공간에 대해 이야기하고 있습니까? –

열의 안쪽에 다른 단어의 너비가 있습니다. 브라우저를 작게 만들 때 변경하지 않을 수 있습니까? – Mark

부트 스트랩 4 - 열회수 없음

답변

관련 문제