整列ボタン中央の小さな画面のブートストラップ

Question

画面サイズが小さくなったときにボタンをモバイル画面の中央に揃えようとしていますが、テキスト整列を中央に設定しようとしましたが動作しないようです。

これは、プル左/テキストの右のブートストラップクラスのIMで上書きしようとしているものでなければなりません。

CSS：

@media screen and (max-width: 998px) { 

    @font-face{ 
     font-family: 'Gotham'; 
     src: url("assets/fonts/Gotham-Bold.otf"); 
     src: url("assets/fonts/Gotham-Light.otf"); 
    } 

    @font-face { 
    font-family: "Gotham-Bold"; 
    src: url("assets/fonts/Gotham-Bold.otf"); 
    font-weight: Bold; 
    } 

    @font-face { 
    font-family: "Gotham-Light"; 
    src: url("assets/fonts/Gotham-Light.otf"); 
    font-weight: Light; 
    } 

    .col-md-4.pull-left.text-right{ 
     position: relative; 
     text-align: center; 
    } 
. 
. 
. 

HTML：

<div class="container-fluid"> 
    <div class="row"> 
      <div class="col-sm-8 pull-right text-left" > 
       <div class="IMGpadding"></div><br> 
       <img style="float:left" class="img-responsive" src = "assets/images/white-leaf-bg.jpg" id="frame"/> 
      </div> 
      <div class="col-md-4 pull-left text-right" > 
       <div class="h1padding"></div> 
       <a style="float:right" class = "h1" href="" id="introID"><b>INTRO</b></a> 

       <div class="h1padding"></div> 
       <a style="float:right" class = "h1" href="" id="OnSuerfaceID"><b>ON THE</b> <span class="light">SURFACE</span></a> 

       <div class="h1padding"></div> 
       <a style="float:right" href="" id="FromOilID"><b>FROM</b> <span class="light">ORE TO OIL</span></a> 

       <div class="h1padding"></div> 
       <a style="float:right" href="" id="EnvImpactID"><b>ENVIRONMENTAL</b> <span class="light">CARE</span></a> 

       <div class="h1padding"></div> 
       <a style="float:right" class = "h1" href="" id="MoreThanGasID"><b>MUCH MORE THAN</b> <span class="light">GASOLINE</span></a> 

       <div class="h1padding"></div> 
       <a style="float:right" class = "h1" href="" id="OneMoreID"><b>ONE MORE</b> <span class="light">THING</span></a> 

      </div> 
    </div> 
</div> 

事前のおかげで、私はまだ非常にブートストラップでのnoobです。

Answer 1

これは他のページと同様に異なります。ここにあなたの要件とコードが追加されたので、私はcodepenに作業コピーを追加しました。

@media screen and (max-width: 998px) { 
 

 
    @font-face{ 
 
     font-family: 'Gotham'; 
 
     src: url("assets/fonts/Gotham-Bold.otf"); 
 
     src: url("assets/fonts/Gotham-Light.otf"); 
 
    } 
 

 
    @font-face { 
 
    font-family: "Gotham-Bold"; 
 
    src: url("assets/fonts/Gotham-Bold.otf"); 
 
    font-weight: Bold; 
 
    } 
 

 
    @font-face { 
 
    font-family: "Gotham-Light"; 
 
    src: url("assets/fonts/Gotham-Light.otf"); 
 
    font-weight: Light; 
 
    } 
 

 
    .col-sm-4.pull-left.text-right{ 
 
     position: relative; 
 
     text-align: right; 
 
     width:50%; 
 
     text-align:right; 
 
    } 
 
    .h1padding { 
 
    margin-bottom:100px; 
 
    } 
 
} 
 

<div class="container-fluid"> 
 
    <div class="row"> 
 
      <div class="col-sm-8 pull-right text-left" > 
 
       <div class="IMGpadding"></div><br> 
 
       <img style="float:left" class="img-responsive" src = "assets/images/white-leaf-bg.jpg" id="frame"/> 
 
      </div> 
 
      <div class="col-sm-4 pull-left text-right" > 
 
       <div class="h1padding"></div> 
 
       <a class = "h1" href="" id="introID"><b>INTRO</b></a> 
 

 
       <div class="h1padding"></div> 
 
       <a class = "h1" href="" id="OnSuerfaceID"><b>ON THE</b> <span class="light">SURFACE</span></a> 
 

 
       <div class="h1padding"></div> 
 
       <a href="" id="FromOilID"><b>FROM</b> <span class="light">ORE TO OIL</span></a> 
 

 
       <div class="h1padding"></div> 
 
       <a href="" id="EnvImpactID"><b>ENVIRONMENTAL</b> <span class="light">CARE</span></a> 
 

 
       <div class="h1padding"></div> 
 
       <a class = "h1" href="" id="MoreThanGasID"><b>MUCH MORE THAN</b> <span class="light">GASOLINE</span></a> 
 

 
       <div class="h1padding"></div> 
 
       <a class = "h1" href="" id="OneMoreID"><b>ONE MORE</b> <span class="light">THING</span></a> 
 

 
      </div> 
 
    </div> 
 
</div>

codepen link

Answer 2

ブートストラップを使用しているので、あなたが.visible-sm、.visible-mdと.visible-lgクラスを使用することができます。これを試してみてください。詳細はhttps://getbootstrap.com/docs/3.3/css/#responsive-utilitiesをご覧ください。