Question

我在row内有两个带链接的图片。有时只需要一个图像，所以我添加了JSTL个标签来验证。问题是当我只显示一个图像时。然后他们没有居中。只有当两个图像都可用时，它才会居中。如何解决这个问题？

<div class="row">
    <c:if test="${content.facebookLink ne 'NO_FACEBOOK_LINK'}">
        <div class="col-sm-3 col-sm-offset-3 col-xs-6">
            <a href="${content.facebookLink}" target="_blank">
                <img src="<c:url value="/resources/images/fb.png"/>">
            </a>
        </div>
    </c:if>
    <c:if test="${content.twitterLink ne 'NO_TWITTER_LINK'}">
        <div class="col-sm-3 col-xs-6">
            <a href="${content.twitterLink}" target="_blank">
                <img src="<c:url value="/resources/images/twitter.png "/>">
            </a>
        </div>
    </c:if>
</div>

感谢。

Answer 1

更好的方法是将inline-block转换为text-center元素，并使用.row类转换为.col-sm-3.col-xs-6 { display: inline-block; float:none; width:auto; } img { width: 100px; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class=container>
  <div class="row text-center">
    <div class="col-sm-3 col-xs-6">
      <a href="${content.facebookLink}" target="_blank">
        <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
      </a>
    </div>
    <div class="col-sm-3 col-xs-6">
      <a href="${content.twitterLink}" target="_blank">
        <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
      </a>
    </div>
  </div>
</div>


<div class=container>
  <div class="row text-center">
    <div class="col-sm-3 col-xs-6">
      <a href="${content.twitterLink}" target="_blank">
        <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
      </a>
    </div>
  </div>
</div>

{{1}}

Answer 2

找到一个简单的解决方案。省略了动态元素中的列。

<div class="row">
    <div class="col-md-12">
        <c:if test="${content.facebookLink ne 'NO_FACEBOOK_LINK'}">
            <a href="${content.facebookLink}" target="_blank" style="display: inline">
                <img src="<c:url value="/resources/images/fb.png"/>">
            </a>
        </c:if>
        <c:if test="${content.twitterLink ne 'NO_TWITTER_LINK'}">
            <a href="${content.twitterLinkk}" target="_blank" style="display: inline">
                <img src="<c:url value="/resources/images/twitter.png "/>">
            </a>
        </c:if>
    </div>
</div>

完美无缺。

动态居中行内的元素

2 个答案: