所以我遇到了bootstraps动态药丸的问题。以下是缩短浏览器宽度之前选项卡的外观:
然而,当我缩短浏览器的宽度时,图像会像这样扭曲(图像的高度和宽度开始缩小):
与此相关的代码是:
<ul class="nav nav-tabs nav-justified">
<li class="active">
<a class="cssTab" data-toggle="tab" href="#menu1">
<center><img class="cssTabImage img-responsive" src="images/group-rates.png"></center>
<br>
Group Rates
</a>
</li>
<li>
<a class="cssTab" data-toggle="tab" href="#menu2">
<center><img class="cssTabImage img-responsive" src="images/payment-info.png"></center>
<br>
Payment Info
</a>
</li>
<li>
<a class="cssTab" data-toggle="tab" href="#menu3">
<center><img class="cssTabImage img-responsive" src="images/insurance-info.png"></center>
<br>
Insurance Info
</a>
</li>
</ul>
以下html的css是:
a.cssTab {
font-size: 18px;
color: #9f9f9f;
font-weight: 200;
}
.cssTabImage {
margin-bottom: -5px;
}
我有什么办法可以解决这个问题吗?
提前致谢
答案 0 :(得分:1)
您可以使用javascript将标签强制设置为最高标签的高度,也可以使用flexbox。
我为你做了一个简单的jsfiddle来查看它。
我的解决方案是使用弹性框
<%
String lookupUrl = "java:comp/env/MyBeanName";
Context ctx = new javax.naming.InitialContext();
MyBeanNameLocal ejbLocal = (MyBeanNameLocal) ctx.lookup(lookupUrl);
String output = ejbLocal.myBusinessMethod();
%>