How to make buttons responsive in bootstrap?

问题

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?

回答1:

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/

回答2:

Perhaps the best answer to this is to have the buttons take up less columns or remove a bit of padding, or as Trix said in the comments: Use media-queries. Another possible one, and only if you are desperate, you can change the font-size. But I doubt you will be forced do that.

Also if you are wondering why the 4th button is'nt fitting is that it cant. Even though it may look like the 4th button can fit, if you observe closely the button cant realy fit. This can be fixed with the solutions above.

回答3:

There are 2 reasons why your buttons are not fitting.
First the 3rd button is not 25%, it's always the same size. Change the width property from the input to the span.
Second, the white spaces between the buttons elements. Here I removed the white spaces moving the closing tag next to the next opening tag.
https://jsfiddle.net/krt5414t/2/
If you use white-space: nowrap your content will be out of your bounding box.

In my fiddle each button is taking exactly 25% so there is no space between them. If you want a margin you either, put them inside 25% bounding boxes or make them a little smaller than 25%.

来源：https://stackoverflow.com/questions/34955272/how-to-make-buttons-responsive-in-bootstrap

标签

html

css

twitter-bootstrap

twitter-bootstrap-3