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

因此，您可以在那里更改填充并查看结果，您可以在手机上查看或调整浏览器大小