Width / size buttons Bootstrap [duplicate]

Navigation
-1

Hello, everyone! How could I put all the buttons of a group of Bootstrap buttons of the same width independent of the content and still remain responsive. For example I have a group of buttons: A B NA, button A and B have the same size, since NA is larger. I wish everyone would be the same size. Thank you

    
asked by anonymous 03.10.2015 / 20:33

1 answer

-1

EDIT 1

You will need to create a custom style and include the last one in the sequence. In the example below I created the small and medium styles. Note that it includes last in the sequence of imports. 

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><scriptsrc="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    </head>
    <body>
        <style>
            .pequeno {
                width: 20%;
            }

            .medio {
                width: 50%;
            }
        </style>
        <div class="container">
            <h2>Button Styles</h2>
            <button type="button" class="btn btn-default pequeno">Default</button>
            <button type="button" class="btn btn-primary pequeno">Primary</button>
            <button type="button" class="btn btn-success medio">Success</button>     
        </div>
    </body>
</html>

EDIT 2

Sorry, I misinterpreted your question. Do you really want the same size regardless of the right content? 

<!DOCTYPE html>
    <html lang="en">
        <head>
            <title>Bootstrap Example</title>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><scriptsrc="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        </head>
        <body>
            <style>
                .mesmo-tamanho {
                    width: 15%;
                    white-space: normal;
                }
            </style>
            <div class="container">
                <h2>Button Styles</h2>
                <button type="button" class="btn btn-default mesmo-tamanho">Default Default</button>
                <button type="button" class="btn btn-primary mesmo-tamanho">Primary Primary Primary Primary</button>
                <button type="button" class="btn btn-success mesmo-tamanho">Success Success Success</button>
            </div>
        </body>
    </html>
    
03.10.2015 / 22:03
How to Mount a Jtable with ResultSet? LEFT JOIN with three tables going wrong