Bootstrap表单上的两个按钮之间的空间

Question

我想在两个按钮之间添加一些空格。此表单使用bootstrap创建。尝试了一些技巧，但无法得到我想要的。同样的页面也可以通过手机访问。

以下是我的代码以及屏幕截图：

<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

问题是Bootstrap的btn-block类。

  

块级按钮跨越父元素的整个宽度。

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

尝试从每个按钮中删除该类，将input-group类的宽度设置为100％，并在第一个按钮后添加边距。

＆＃13;

＆＃13;

input[type=button] {
  border-radius: 10px;
  width: 47%;
}

.input-group {
  display: inline-block;
  width: 100%;
}

input[type=button]:first-child {
  margin-right: 20px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以向input-group-btn块添加填充。

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