Question

我有这段代码：

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

从下图中可以看出，即使有一些空格，button4也会跳到下一行。

我怎样才能做出这样的响应，这样无论什么是屏幕尺寸按钮都保持在一排？

Answer 1

将.nowrap{white-space: nowrap;}添加到您的CSS

将nowrap添加到此行<div class="col-md-6 col-md-offset-3 responsive nowrap">

请参阅小提琴：https://jsfiddle.net/DIRTY_SMITH/rvm49wfa/4/

Answer 2

也许最好的答案是让按钮占用更少的列或删除一些填充，或者如Trix在评论中所说：使用媒体查询。另一个可能的，只有你绝望，你可以改变字体大小。但我怀疑你会被迫这样做。

另外，如果你想知道为什么第四个按钮是否适合它是不能的。尽管它可能看起来像第4个按钮可以适合，如果你仔细观察按钮不能适合。这可以通过上述解决方案来解决。

Answer 3

您的按钮不适合有两个原因首先，第三个按钮不是25％，它总是相同的大小。将width属性从input更改为span 第二，button s元素之间的空白。在这里，我移除了在下一个开始标记旁边移动结束标记的空白区域 https://jsfiddle.net/krt5414t/2/
如果您使用white-space: nowrap，您的内容将不在您的边界框内。

在我的小提琴中，每个按钮的精确度为25％，因此它们之间没有空隙。如果你想要一个保证金，你可以把它们放在25％的边界框内，或者让它们小于25％。

如何在引导程序中使按钮响应？

3 个答案: