부트 스트랩 버튼 이동 크기 조정 문제

Question

나는 아래 두 개의 부트 스트랩 버튼이 있습니다

<div class="row"> 
    <div class="col-sm-6 col-xs-6 col-xxs-12"> 
      <button class="btn editReport">Edit Report</button> 
    </div> 
    <div class="col-sm-6 col-xs-6 col-xxs-12"> 
      <button class="btn pull-right submitReport">Submit Report</button> 
    </div> 
</div> 

바탕 화면보기

"보고서 편집"버튼을 페이지의 왼쪽에 있고 버튼은 "보고서 제출" 페이지의 오른쪽에. 일반적인 데스크톱보기에서는 정상적으로 작동하지만 모바일보기에는 문제가 있습니다.

은 다음과 같은 문제로 실행 :

및

구글 주위하지만 도움이되지 않았다. 이 두 버튼을 위아래로 유지하고 모바일보기에서 중간에 정렬하려면 어떻게해야합니까?

감사합니다.

Answer 1

보고 할 문제는 의 극히 작은 모바일 장치 인에서만 발생해야합니다. iPhone 4 시리즈에서 볼 수있는 것보다 작습니다. 즉, 버튼이 작아 지도록 특정 중복 항목을 반응 적으로 숨기는 것입니다.

.hidden-xs에 'Report'(및 그 앞의 공백) 단어를 감싸서 작은 장치에서 작업 할 때 해당 단어를 숨길 수 있습니다.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-xs-6"> 
 
     <button class="btn btn-default">Edit<span class="hidden-xs"> Report</span></button> 
 
    </div> 
 
    <div class="col-xs-6 text-right"> 
 
     <button class="btn btn-default">Submit<span class="hidden-xs"> Report</span></button> 
 
    </div> 
 
    </div> 
 
</div>

참고 : 위의 코드는 형편 구문 (.col-xs-6 및 .col-sm-6가 중복, 당신은 단순히 열을 .text-right을 적용하는 경우 .pull-right가 불필요 등)을 정리합니다.