응답 형식의 HTML CSS

Question

는이 같은 양식을 가지고 :

HTML 구조 :

내가 모바일 화면을 열 때까지 정상 보인다

<form action="" method="post" id="frmreport"> 
 
        Booking Date : 
 
        <div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; display:inline"> 
 
         <span></span> <b class="caret"></b> 
 
        </div>&nbsp;&nbsp; 
 
        <input type="hidden" name="input_date_from" id="input_date_from" value=""> 
 
        <input type="hidden" name="input_date_to" id="input_date_to" value=""> 
 
        <button type="button" class="btn btn-primary" style="padding:5px 12px;margin-bottom:3px;" onclick="print_report('html');"> 
 
         <i class="fi flaticon-copy"></i> View 
 
        </button> 
 
        <button type="button" class="btn btn-primary" style="padding:5px 12px;margin-bottom:3px;" onclick="print_report('pdf');"> 
 
         <i class="fi flaticon-download"></i> PDF 
 
        </button> 
 
        <button type="button" class="btn btn-primary" style="padding:5px 12px;margin-bottom:3px;" onclick="print_report('csv');"> 
 
         <i class="fi flaticon-download"></i> CSV 
 
        </button> 
 
       </form>

col-sm-6을 추가하려했으나 CSV 버튼이보기 및 PDF 버튼 아래의 새 줄을 끊습니다. 무엇을 추가해야합니까?

Answer 1

당신이 스타일로 한 모든 코드 = ""속성이 <style></style> 태그 나 CSS 파일로 이동해야합니다, 단지 CSS

#reportrange{ 
background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; display:inline 
} 

#button{ 
padding:5px 12px;margin-bottom:3px; 
} 

거기에이 코드를 복사 HTML (방금 복사 한 버튼에 이드를 추가했습니다.)

<button type="button" id="button" class="btn btn-primary" onclick="print_report('html');"> 
<button type="button" id="button" class="btn btn-primary" onclick="print_report('html');"> 
<button type="button" id="button" class="btn btn-primary" onclick="print_report('html');"> 

그런 다음 당신이 패딩을 변경할 수 있으며, 당신도 휴대 전화 나 브라우저 크기를 조정하여 볼 수있는 결과를보고 거기에

@media screen and (max-width: 650px) { 
#button{ 
/* add all of your mobile styles in here */ 
} 
} 

그래서 CSS에서 이것을 사용