[英]Align button and text in collapse Bootstrap
我嘗試在Bootstrap中使用元素Collapse,但我有一點點問題。
這是一個例子
我嘗試在同一行中將我的文本和按鈕垃圾對齊。 如您所見,它發生了變化。
如何解決這個問題呢?
<form method="post" action="wbx.php">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
<button class="btn btn-danger pull-right" type="submit" name="supprAlias" value="'.$idValue.'">
<i class="icon-trash icon-white"></i>
</button>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2</a>
<button class="btn btn-danger pull-right" type="submit" name="supprAlias" value="'.$idValue.'">
<i class="icon-trash icon-white"></i>
</button>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
</div>
</form>
在我的控制器的另一頁中:
if(!empty($_POST['supprUserAlias']))
{
$savant->deletesUserAlias = $gemel->setDeleteUserAlias($_POST['supprUserAlias'], $username, $domain, $serverMail);
header('Location: wbx.php?user='.$username.'#alias');
exit;
}
編輯
終於找到解決方法:
在<button>
<div class="accordion-group">
和<div class="accordion-heading">
<form method="post" action="wbx.php">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<button class="btn btn-danger pull-right" type="submit" name="supprAlias" value="'.$idValue.'">
<i class="icon-trash icon-white"></i>
</button>
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
您只需要像這樣將按鈕放在鏈接(a)標記內。 我認為您還應該使按鈕變小( btn-mini
),以使其恰好適合折疊鏈接。
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1 <button class="btn btn-mini btn-danger pull-right" type="submit"><i class="icon-trash icon-white"></i></button>
</a>
編輯-
單擊按鈕的方式可以像..
$('.accordion-toggle .btn').click(function(e){
e.preventDefault();
alert("button!");
return false;
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.