Bootstrap窗体上两个按钮之间的空间

Question

I want to add some space between 2 buttons. This form is created using bootstrap. Tried a number of tricks but couldn't get what I want. The same page is accessed via mobile too.

Here is my code along with screenshot:

<div class="input-group">
        <span class="input-group-btn">
            <input type="button"  style="border-radius: 10px;"  id="button1"   class="btn btn-primary btn-lg btn-block"  value="My Provider"/>
        </span>
        <span class="input-group-btn" > &nbsp;
            <input type="button"  style="border-radius: 10px;" id="button2"   class="btn btn-primary btn-lg btn-block"   value="Any Provider"/>
        </span>
</div>

Answer 1

The problem is Bootstrap's btn-block class.

A block level button spans the entire width of the parent element.

http://www.w3schools.com/bootstrap/bootstrap_buttons.asp

Try removing that class from each of your buttons, setting the width of the input-group class to 100% and adding margin after the first button.

 input[type=button] { border-radius: 10px; width: 47%; } .input-group { display: inline-block; width: 100%; } input[type=button]:first-child { margin-right: 20px; } 

 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="input-group"> <input type="button" id="button1" class="btn btn-primary btn-lg" value="My Provider"/> <input type="button" id="button2" class="btn btn-primary btn-lg" value="Any Provider"/> </div> 

Answer 2

You can add paddings to input-group-btn blocks.

 .container { margin-top: 50px; } .input-group-btn-left { padding-right: 30px; } .input-group-btn-right { padding-left: 30px; } 

 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <div class="container"> <div class="input-group"> <span class="input-group-btn input-group-btn-left"> <input type="button" id="button1" class="btn btn-primary btn-lg btn-block" value="My Provider" style="border-radius: 10px;"> </span> <span class="input-group-btn input-group-btn-right"> <input type="button" id="button2" class="btn btn-primary btn-lg btn-block" value="Any Provider" style="border-radius: 10px;"> </span> </div> </div>