响应形式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 */ 
} 
} 

所以你可以改变填充和看到的结果，你既可以查看您的手机上或者通过调整您的浏览器