我试图在选项卡面板标题的右侧区域放置一些按钮:
我不知道如何使用 boostrap...
这是标签的代码:
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active">
<a href="#header" data-toggle="tab">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x text-primary"></i>
<i class="fa fa-info fa-stack-1x text-primary"></i>
</span> Inforazioni Principali
</a>
</li>
<li>
<a href="#shipping" data-toggle="tab">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x text-primary"></i>
<i class="fa fa-truck fa-stack-1x text-primary"></i>
</span> Spedizioni
</a>
</li>
<li>
<a href="#payment" data-toggle="tab">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x text-primary"></i>
<i class="fa fa-eur fa-stack-1x text-primary"></i>
</span> Pagamenti
</a>
</li>
</ul>
<div class="tab-content" style="min-height: 758px">
<div class="tab-pane active" id="header"> //FIRST PANEL HERE
......
在面板标签的正确位置添加两个按钮的正确方法是什么? 我想让按钮与面板标签对齐,但我不知道该怎么做...
谢谢
最佳答案
再添加两个li
ul
中的标签名为 nav-tabs
在你的导航栏中有一个名为 button
的类(以免影响其他元素)
和样式如下:
.button{
float:right !important;
margin-right:5px;
margin-left:5px;
padding:5px;
border:solid red;
}
下面的片段
.button{
float:right !important;
margin-right:5px;
margin-left:5px;
padding:5px;
border:solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="nav-tabs-custom">
<ul class="nav nav-tabs tb">
<li class="active">
<a href="#header" data-toggle="tab">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x text-primary"></i>
<i class="fa fa-info fa-stack-1x text-primary"></i>
</span> Inforazioni Principali
</a>
</li>
<li>
<a href="#shipping" data-toggle="tab">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x text-primary"></i>
<i class="fa fa-truck fa-stack-1x text-primary"></i>
</span> Spedizioni
</a>
</li>
<li>
<a href="#payment" data-toggle="tab">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x text-primary"></i>
<i class="fa fa-eur fa-stack-1x text-primary"></i>
</span> Pagamenti
</a>
</li>
<li class="button">
BUTTON1
</li>
<li class="button">
BUTTON2
</li>
</ul>
<div class="tab-content" style="min-height: 758px">
<div class="tab-pane active" id="header"> //FIRST PANEL HERE
关于css - (Bootstrap 3 + AdminLte2) - 导航选项卡和右键,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43415967/