[英]Space between two buttons on a Bootstrap form
我想在2個按鈕之間添加一些空間。 此表單是使用引導程序創建的。 嘗試了許多技巧,但無法獲得我想要的東西。 也可以通過移動設備訪問同一頁面。
這是我的代碼以及屏幕截圖:
<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" >
<input type="button" style="border-radius: 10px;" id="button2" class="btn btn-primary btn-lg btn-block" value="Any Provider"/>
</span>
</div>
問題是Bootstrap的btn-block
類。
塊級按鈕跨越父元素的整個寬度。
http://www.w3schools.com/bootstrap/bootstrap_buttons.asp
嘗試從每個按鈕中刪除該類,將input-group
類的寬度設置為100%,並在第一個按鈕之后添加邊距。
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>
您可以將填充添加到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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.