応答形式のHTML、CSS

Question

<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>

私が見るとPDFボタン下の新しい行にcol-sm-6が、CSVボタンブレークを追加しようとしました。私は何を追加すべきですか？

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

（私はちょうどそこにこれをコピーボタンにidを追加しました）

は、その後、あなたがパディングを変更することができますし、あなたはどちらかお使いの携帯電話にするかブラウザのサイズを変更することによってそれを見ることができ、結果を見るためにそこに

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

ので、CSSでこれを使用