響應形式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按鈕打破了View和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（我剛剛添加了id的按鈕只是複製這個在那裏）

<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');"> 

然後在CSS中有使用此

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

所以你可以改變填充和看到的結果，你既可以查看您的手機上或者通過調整您的瀏覽器