html - 如何使按钮在 Bootstrap 中响应？

标签 html css twitter-bootstrap twitter-bootstrap-3

我有这个代码:

<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 也会跳到下一行。