如何在启动时使按钮响应? [英] How to make buttons responsive in bootstrap?
本文介绍了如何在启动时使按钮响应?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有此代码:
< html>< head>< link rel ="stylesheet" type ="text/css" href ="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" media ="screen"/>< style>.btn-file {职位:相对溢出:隐藏；}.btn-file input [type = file] {位置:绝对；最高:0;正确:0；最小宽度:100％；最低高度:100％；font-size:100px;文字对齐:右；过滤器:alpha(opacity = 0);不透明度:0；大纲:无；背景:白色；游标:继承;显示:块；}</style></head><身体>< div class ="row" style ="margin-top:10px; margin-bottom:10px; padding-bottom:40px;">< div class ="col-md-6 col-md-offset-3响应式">< button type ="button" value ="Btn1" class ="btn btn-primary btn-sm" style ="width:25％; background-color:#428bca;"disabled ="disabled"> Button1</button>< button type ="button" value ="Btn2" class ="btn btn-primary btn-sm" style ="width:25％;"> Button2</button>< span class ="btn btn-primary btn-file" style ="font-size:12px;">文件上传按钮< input type ="file" style ="width:25％;"/></span>< button type ="button" value ="Btn4" class ="btn btn-primary btn-sm" style ="width:25％;"> Button4</button></div></div></body></html> 这是JSFiddle的链接:
我如何使它具有响应性，以便无论屏幕大小如何，按钮都保持一排?
解决方案
在您的CSS中添加 .nowrap {white-space:nowrap;}
将 nowrap 添加到此行< div class ="col-md-6 col-md-offset-3响应nowrap">
请参阅小提琴: https://jsfiddle.net/DIRTY_SMITH/rvm49wfa/4/
I have this code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" media="screen" />
<style>
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
</style>
</head>
<body>
<div class="row" style="margin-top:10px; margin-bottom:10px;padding-bottom:40px;">
<div class="col-md-6 col-md-offset-3 responsive">
<button type="button" value="Btn1" class="btn btn-primary btn-sm" style="width:25%;background-color: #428bca;" disabled="disabled">Button1</button>
<button type="button" value="Btn2" class="btn btn-primary btn-sm" style="width:25%;">Button2</button>
<span class="btn btn-primary btn-file" style="font-size:12px;">File Upload button <input type="file" style="width:25%;"/>
</span>
<button type="button" value="Btn4" class="btn btn-primary btn-sm" style="width:25%;">Button4</button>
</div>
</div>
</body>
</html>
Here is the link for JSFiddle: https://jsfiddle.net/rvm49wfa/
As you can see from the below image that button4 jumped to next row even when there is some white space.
How could I make this responsive so that no matter what is the screensize the buttons stay all in one row?
解决方案
Add .nowrap{white-space: nowrap;} to your CSS
Add nowrap to this line <div class="col-md-6 col-md-offset-3 responsive nowrap">
See fiddle: https://jsfiddle.net/DIRTY_SMITH/rvm49wfa/4/
这篇关于如何在启动时使按钮响应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
