動的に中心にある要素を列に入れて

Question

私はrowの中にリンク付きの2つの画像を持っています。場合によっては画像が1つしか必要ないため、確認のためにJSTLタグを追加しました。問題は、ただ1つのイメージを表示しているときです。それから彼らは中心にない。両方の画像が利用可能な場合にのみ、中央に配置されます。これに取り組む方法？

<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-6inline-blockの要素を変換し、簡単な解決策を見つけた.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

にtext-centerクラスを使用することです。動的要素からの列を省略しました。

<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> 

完全に機能します。