ブートストラップフットボールチームのダイナミックレイアウト

Question

ファンタジーリーグチームを表示するレイアウトを設定しようとしていましたが、元々はテーブルビューでプレーヤ名を使用していましたが、それをグラフ表示に変更したいチームラインナップ。

私はそれを私が欲しいものに似せることはできますが、私はCSSを書くのにあまり経験がありません。サイトはPHPで書かれているので、何人のプレーヤーがいるかに基づいていくつかのスタイルを持たなければならないと思っていますより良い方法がない限り、動的にスワップするためにphpを使用します。

私はゴールキーパーのポジションでインラインでポジションを取るようにポジションを取得する方法については、float: leftを使用してポジションを取得していますが、そのポジションを得ることはできません。

.section-heading{ 
 
    border-bottom: 1px solid #c8c8c8; 
 
} 
 
.section-heading-text{ 
 
    text-align: center; 
 
} 
 

 
.section-content{ 
 
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#009b29+0,009b29+20,61bf7a+20,61bf7a+40,009b29+40,009b29+60,61bf7a+60,61bf7a+80,009b29+80 */ 
 
    background: #009b29; /* Old browsers */ 
 
    background: -moz-linear-gradient(left, #009b29 0%, #009b29 20%, #61bf7a 20%, #61bf7a 40%, #009b29 40%, #009b29 60%, #61bf7a 60%, #61bf7a 80%, #009b29 80%); /* FF3.6-15 */ 
 
    background: -webkit-linear-gradient(left, #009b29 0%,#009b29 20%,#61bf7a 20%,#61bf7a 40%,#009b29 40%,#009b29 60%,#61bf7a 60%,#61bf7a 80%,#009b29 80%); /* Chrome10-25,Safari5.1-6 */ 
 
    background: linear-gradient(to right, #009b29 0%,#009b29 20%,#61bf7a 20%,#61bf7a 40%,#009b29 40%,#009b29 60%,#61bf7a 60%,#61bf7a 80%,#009b29 80%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009b29', endColorstr='#009b29',GradientType=1); /* IE6-9 */ 
 

 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
    height: 300px; 
 
} 
 
.gk{ 
 
    text-align: center; 
 
} 
 
.kit-image{ 
 
    height: 40px; 
 
    width: 35px; 
 
} 
 
.defender{ 
 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
    padding-top: 10px; 
 
    float: left; 
 
    text-align: center; 
 
}

<div class="section-box"> 
 
    <div class="section-heading"> 
 
    <h2 class="section-heading-text">Team Name</h2> 
 
    </div> 
 
    <div class="section-content"> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <div class="gk"> 
 
      <img src="www.gamingcentury.com/img/keeperKit.png" class="kit-image"> 
 
      <div> 
 
      Goal keeper 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="defender"> 
 
     <img src="www.gamingcentury.com/img/outKit.png" class="kit-image"> 
 
     <div> 
 
      Defender 
 
     </div> 
 
     </div> 
 
     <div class="defender"> 
 
     <img src="www.gamingcentury.com/img/outKit.png" class="kit-image"> 
 
     <div> 
 
      Defender 
 
     </div> 
 
     </div> 
 
     <div class="defender"> 
 
     <img src="www.gamingcentury.com/img/outKit.png" class="kit-image"> 
 
     <div> 
 
      Defender 
 
     </div> 
 
     </div> 
 
     <div class="defender"> 
 
     <img src="www.gamingcentury.com/img/outKit.png" class="kit-image"> 
 
     <div> 
 
      Defender 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

Answer 1

これはCOL-中心と行を中心 CSSクラスの作成を提供し、私の解決策の提案、で、次のようにそれらを適用します。

CSS：

.row-centered { 
    text-align:center; 
} 


.col-centered { 
    display:inline-block; 
    float:none; 
} 

html：

<div class="section-box"> 
    <div class="section-heading"> 
    <h2 class="section-heading-text">Team Name</h2> 
    </div> 
    <div class="section-content"> 
    <div class="row"> 
     <div class="col-sm-12"> 
     <div class="gk"> 
      <img src="www.gamingcentury.com/img/keeperKit.png" class="kit-image"> 
      <div> 
      Goal keeper 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="row row-centered"> 
     <div class="defender col-centered"> 
     <img src="www.gamingcentury.com/img/outKit.png" class="kit-image"> 
     <div> 
      Defender 
     </div> 
     </div> 
     <div class="defender col-centered"> 
     <img src="www.gamingcentury.com/img/outKit.png" class="kit-image"> 
     <div> 
      Defender 
     </div> 
     </div> 
     <div class="defender col-centered"> 
     <img src="www.gamingcentury.com/img/outKit.png" class="kit-image"> 
     <div> 
      Defender 
     </div> 
     </div> 
     <div class="defender col-centered"> 
     <img src="www.gamingcentury.com/img/outKit.png" class="kit-image"> 
     <div> 
      Defender 
     </div> 
     </div> 
    </div> 
    </div> 

Answer 2

あなただけのブートストラップ列を使用し、最初の1にオフセットを追加して、すべての列のテキスト整列に追加することによってこれを行うことができます。中央の属性。

<div class="row"> 
    <div class="col-sm-12"> 
    <div class="gk"> 
     <img src="www.gamingcentury.com/img/keeperKit.png" class="kit-image"> 
     <div> 
     Goal keeper 
     </div> 
    </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="defender col-sm-1 col-sm-offset-4"> 
    <img src="www.gamingcentury.com/img/outKit.png" class="kit-image"> 
    <div> 
     Defender 
    </div> 
    </div> 
    <div class="defender col-sm-1"> 
    <img src="www.gamingcentury.com/img/outKit.png" class="kit-image"> 
    <div> 
     Defender 
    </div> 
    </div> 
    <div class="defender col-sm-1"> 
    <img src="www.gamingcentury.com/img/outKit.png" class="kit-image"> 
    <div> 
     Defender 
    </div> 
    </div> 
    <div class="defender col-sm-1"> 
    <img src="www.gamingcentury.com/img/outKit.png" class="kit-image"> 
    <div> 
     Defender 
    </div> 
    </div> 
</div> 

とCSSで：

.defender{ 
    text-align: center; 
}