行內動態中心元素

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

更好的方法是.col-sm-3.col-xs-6轉換爲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>

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> 

完美的作品。