您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)bootstrap中如何設(shè)置按鈕位置,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
bootstrap中可以使用pull-right, pull-left、text-right, text-center, text-left來(lái)設(shè)置按鈕的位置。
例:
以下是一段簡(jiǎn)單的示例,需要將其中每個(gè)li中的按鈕靠右對(duì)齊:
<ul> <li>One <input class="btn pull-right" value="test"></li> <li>Two <input class="btn pull-right" value="test2"></li> </ul>
方法一:
在Bootstrap 3中,可以使用pull-right樣式類來(lái)將元素右對(duì)齊,如下:
<!--https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css--><ul> <li>One <button class="btn btn-primary pull-right">test</button></li> <li>Two <button class="btn btn-danger pull-right">test2</button></li> </ul>
適當(dāng)調(diào)整一下每個(gè)li的高度,如下:
li{line-height:40px; height:40px;}
方法二:
在Bootstrap 3中,還可以使用text-right樣式類來(lái)右對(duì)齊按鈕,如下:
<div class="row"> <div class="col-xs-12"> <div class="text-right"> <button type="button" class="btn btn-default">Default</button> </div> </div> </div>
方法三:
在Bootstrap 4中,pull-right樣式類已經(jīng)更名為float-right類名了,如下:
<div class="row"> <div class="col-12">One <input type="button" class="btn float-right" value="test"></div> <div class="col-12">Two <input type="button" class="btn float-right" value="test"></div></div>
看完上述內(nèi)容,你們對(duì)bootstrap中如何設(shè)置按鈕位置有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。