我有这个代码：
<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>
这是 JSFiddle 的链接：https://jsfiddle.net/rvm49wfa/ https://jsfiddle.net/rvm49wfa/
从下图中可以看出，即使有一些空白，button4 也会跳到下一行。
我怎样才能使其响应，以便无论屏幕尺寸是多少，按钮都保持在一排？
Add .nowrap{white-space: nowrap;}到你的CSS
Add nowrap到这一行<div class="col-md-6 col-md-offset-3 responsive nowrap">
参见小提琴：https://jsfiddle.net/DIRTY_SMITH/rvm49wfa/4/ https://jsfiddle.net/DIRTY_SMITH/rvm49wfa/4/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
