如何在启动时使按钮响应? | 如何在启动时使按钮响应

本文介绍了如何在启动时使按钮响应?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有此代码:

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

这篇关于如何在启动时使按钮响应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！