CSSは携帯電話でめちゃくちゃになった - ブートストラップ -- html フィールド と twitter-bootstrap フィールド と css フィールド と media-queries フィールド 関連 問題

CSS messed up on mobile - bootstrap












0
vote

問題

日本語

私はBootstrapが5等しい列に対して機能を提供しないので、幅画面を5等列に分割しなければならないブートストラップのウェブサイトで作業しているので、デスクトップでは良く機能するため、自分自身を作成し​​ました。携帯電話でめちゃくちゃになった。私は最善を尽くしましたが、ここで何が悪いのかを理解することができませんでした。

これはコードサンプルです。

<事前> <コード> <div class="row" style="margin: 0;"> <div class="conatiner-fluid services"> <a href="/applications"> <div class="col-md-5 apps text-center"> <img src="images/home-page-tiles/apps.jpg" class="img-responsive" /> <div class="caption"> <h3> APPLICATIONS</h3> <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button> </div> </div> </a> <a href="/social"> <div class="col-md-5 apps text-center"> <img src="images/home-page-tiles/social.jpg" class="img-responsive" /> <div class="caption"> <h3> SOCIAL </h3> <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button> </div> </div> </a> <a href="/digital"> <div class="col-md-5 apps text-center"> <img src="images/home-page-tiles/digital.jpg" class="img-responsive" /> <div class="caption"> <h3> DIGITAL </h3> <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button> </div> </div> </a> <a href="/web"> <div class="col-md-5 apps text-center"> <img src="images/home-page-tiles/web.jpg" class="img-responsive" /> <div class="caption"> <h3> WEB </h3> <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button> </div> </div> </a> <a href="/design"> <div class="col-md-5 apps text-center"> <img src="images/home-page-tiles/design.jpg" class="img-responsive" /> <div class="caption"> <h3> DESIGN </h3> <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button> </div> </div> </a> </div> </div>

とこのセクションのCSS:

<事前> <コード> .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5 { position: relative; min-height: 269px; padding: 0; } .col-xs-5 { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-5 { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-5 { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-5 { width: 20%; float: left; } } .apps { display: flex; justify-content: center; align-items: center; } .caption { text-align: center; position: absolute; top: 55%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .caption h3 { color: #fff; font-family: menuFont; -webkit-font-smoothing: antialiased; margin: 0; text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1); -webkit-text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1); -moz-text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1); -o-text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1); } .home-page-explore { background-color: transparent; border:1px solid #fff; color:white; border-radius: 0px; margin-top:10px; } .home-page-explore:hover { background-color: transparent; border:1px solid #fff; color:white; }

モバイルでは、左側にシフトされた見出しとボタンとi-Phone 6とUpモデル、見出しやボタンはまったく表示されません。

これは、リアルタイムで問題を見たい人のためのWebサイトの link

です。
英語

I am working on a bootstrap website where I have to divide the width screen to 5 equal columns as Bootstrap doesn't provide functionality for 5 equal columns, SO i have created my own, As it works good on desktop, but it messed up on mobile. I have tried my best but unable to figure out what is wrong here.

Here is the code sample.

<div class="row" style="margin: 0;">     <div class="conatiner-fluid services">         <a href="/applications">             <div class="col-md-5 apps text-center">                 <img src="images/home-page-tiles/apps.jpg" class="img-responsive" />                 <div class="caption">                     <h3> APPLICATIONS</h3>                     <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button>                  </div>             </div>          </a>          <a href="/social">             <div class="col-md-5 apps text-center">                 <img src="images/home-page-tiles/social.jpg" class="img-responsive" />                 <div class="caption">                     <h3> SOCIAL </h3>                     <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button>                 </div>             </div>         </a>          <a href="/digital">             <div class="col-md-5 apps text-center">                 <img src="images/home-page-tiles/digital.jpg" class="img-responsive" />                 <div class="caption">                     <h3> DIGITAL </h3>                     <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button>                 </div>             </div>         </a>          <a href="/web">             <div class="col-md-5 apps text-center">                 <img src="images/home-page-tiles/web.jpg" class="img-responsive" />                 <div class="caption">                     <h3> WEB </h3>                     <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button>                 </div>             </div>         </a>          <a href="/design">             <div class="col-md-5 apps text-center">                 <img src="images/home-page-tiles/design.jpg" class="img-responsive" />                 <div class="caption">                     <h3> DESIGN </h3>                     <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button>                 </div>             </div>         </a>      </div> </div> 

and the css for this section:

.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5 {     position: relative;     min-height: 269px;     padding: 0; }  .col-xs-5 {     width: 20%;     float: left; }  @media (min-width: 768px) {     .col-sm-5 {         width: 20%;         float: left;     } }  @media (min-width: 992px) {     .col-md-5 {         width: 20%;         float: left;     } }  @media (min-width: 1200px) {     .col-lg-5 {         width: 20%;         float: left;     } }  .apps {     display: flex;     justify-content: center;     align-items: center; }  .caption {     text-align: center;     position: absolute;     top: 55%;     -webkit-transform: translateY(-50%);     -o-transform: translateY(-50%);     transform: translateY(-50%); }  .caption h3 {     color: #fff;     font-family: menuFont;     -webkit-font-smoothing: antialiased;     margin: 0;     text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1);     -webkit-text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1);     -moz-text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1);     -o-text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1); } .home-page-explore {     background-color: transparent;     border:1px solid #fff;     color:white;     border-radius: 0px;     margin-top:10px;  } .home-page-explore:hover {     background-color: transparent;     border:1px solid #fff;     color:white;  } 

On Mobile, The headings and buttons shifted to left side and on I-PHONE 6 and up models, headings and buttons doesn't show at all.

here is the link of the website for those who want to see the issue in real time

</div
           

回答リスト

0
 
vote

これが解決策です - DIV上のすべてのクラス(COL-MD-5 COL-SM-5 COL-XS-5)を使用してください。

 <コード> .col-xs-5,  .col-sm-5,  .col-md-5,  .col-lg-5 {      position: relative;      min-height: 269px;      padding: 0;  }    .col-xs-5 {      width: 20% !important;      float: left;  }    @media (min-width: 768px) {      .col-sm-5 {          width: 20% !important;          float: left;      }  }    @media (min-width: 992px) {      .col-md-5 {          width: 20% !important;          float: left;      }  }    @media (min-width: 1200px) {      .col-lg-5 {          width: 20% !important;          float: left;      }  }    .apps {      display: flex;      justify-content: center;      align-items: center;  }    .caption {      text-align: center;      position: absolute;      top: 55%;      -webkit-transform: translateY(-50%);      -o-transform: translateY(-50%);      transform: translateY(-50%);  }    .caption h3 {      color: #fff;      font-family: menuFont;      -webkit-font-smoothing: antialiased;      margin: 0;      text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1);      -webkit-text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1);      -moz-text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1);      -o-text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1);  }  .home-page-explore {      background-color: transparent;      border:1px solid #fff;      color:white;      border-radius: 0px;      margin-top:10px;    }  .home-page-explore:hover {      background-color: transparent;      border:1px solid #fff;      color:white;    }  
<プリクラス= "Snippet-Code-HTML LANG-HTML Prettyprint-Override"> <コード> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="row" style="margin: 0;"> <div class="conatiner-fluid services"> <a href="/applications"> <div class="col-md-5 col-sm-5 col-xs-5 apps text-center"> <img src="images/home-page-tiles/apps.jpg" class="img-responsive" /> <div class="caption"> <h3> APPLICATIONS</h3> <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button > </div> </div> </a> <a href="/social"> <div class="col-md-5 col-sm-5 col-xs-5 apps text-center"> <img src="images/home-page-tiles/social.jpg" class="img-responsive" /> <div class="caption"> <h3> SOCIAL </h3> <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button> </div> </div> </a> <a href="/digital"> <div class="col-md-5 col-sm-5 col-xs-5 apps text-center"> <img src="images/home-page-tiles/digital.jpg" class="img-responsive" /> <div class="caption"> <h3> DIGITAL </h3> <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button> </div> </div> </a> <a href="/web"> <div class="col-md-5 col-sm-5 col-xs-5 apps text-center"> <img src="images/home-page-tiles/web.jpg" class="img-responsive" /> <div class="caption"> <h3> WEB </h3> <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button> </div> </div> </a> <a href="/design"> <div class="col-md-5 col-sm-5 col-xs-5 apps text-center"> <img src="images/home-page-tiles/design.jpg" class="img-responsive" /> <div class="caption"> <h3> DESIGN </h3> <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button> </div> </div> </a> </div> </div>
 

Here is the solution- Use all classes on the div(col-md-5 col-sm-5 col-xs-5 ).

.col-xs-5,  .col-sm-5,  .col-md-5,  .col-lg-5 {      position: relative;      min-height: 269px;      padding: 0;  }    .col-xs-5 {      width: 20% !important;      float: left;  }    @media (min-width: 768px) {      .col-sm-5 {          width: 20% !important;          float: left;      }  }    @media (min-width: 992px) {      .col-md-5 {          width: 20% !important;          float: left;      }  }    @media (min-width: 1200px) {      .col-lg-5 {          width: 20% !important;          float: left;      }  }    .apps {      display: flex;      justify-content: center;      align-items: center;  }    .caption {      text-align: center;      position: absolute;      top: 55%;      -webkit-transform: translateY(-50%);      -o-transform: translateY(-50%);      transform: translateY(-50%);  }    .caption h3 {      color: #fff;      font-family: menuFont;      -webkit-font-smoothing: antialiased;      margin: 0;      text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1);      -webkit-text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1);      -moz-text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1);      -o-text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1);  }  .home-page-explore {      background-color: transparent;      border:1px solid #fff;      color:white;      border-radius: 0px;      margin-top:10px;    }  .home-page-explore:hover {      background-color: transparent;      border:1px solid #fff;      color:white;    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">    <div class="row" style="margin: 0;">      <div class="conatiner-fluid services">          <a href="/applications">              <div class="col-md-5 col-sm-5 col-xs-5 apps text-center">                  <img src="images/home-page-tiles/apps.jpg" class="img-responsive" />                  <div class="caption">                      <h3> APPLICATIONS</h3>                      <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button >                    </div>              </div>           </a>            <a href="/social">              <div class="col-md-5 col-sm-5 col-xs-5 apps text-center">                  <img src="images/home-page-tiles/social.jpg" class="img-responsive" />                  <div class="caption">                      <h3> SOCIAL </h3>                      <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button>                  </div>              </div>          </a>            <a href="/digital">              <div class="col-md-5 col-sm-5 col-xs-5 apps text-center">                  <img src="images/home-page-tiles/digital.jpg" class="img-responsive" />                  <div class="caption">                      <h3> DIGITAL </h3>                      <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button>                  </div>              </div>          </a>            <a href="/web">              <div class="col-md-5 col-sm-5 col-xs-5 apps text-center">                  <img src="images/home-page-tiles/web.jpg" class="img-responsive" />                  <div class="caption">                      <h3> WEB </h3>                      <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button>                  </div>              </div>          </a>            <a href="/design">              <div class="col-md-5 col-sm-5 col-xs-5 apps text-center">                  <img src="images/home-page-tiles/design.jpg" class="img-responsive" />                  <div class="caption">                      <h3> DESIGN </h3>                      <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button>                  </div>              </div>          </a>        </div>  </div>
</div
 
 
 
 

関連する質問

14  応答テーブルデザインを達成するために、TDで表示:TDでブロックを使用することは可能ですか?  ( Is it possible to use displayblock on td in html email to achieve responsive t ) 
この素晴らしい記事では、モバイルブラウザにとっての性的に拡張されたレスポンシブテーブルを作成する方法について説明します。 今私はHTMLの電子メールに同じテクニックを適用しようとしていますが、 display:block はHTMLの電子メールで動作していない...

0  景観のAndroidに表示されないページコンテンツ  ( Page content not visible on android in landscape ) 
私は慣例のためのあらゆる種類の解決策を見つけるために、私は今や符号化に遭遇するすべての種類の解決策を見つけて、私が解決策を見つけることができない問題に遭遇したときに投稿する場所となるだろうと考えました。のための。 私は昨日私のサイトのためのメディアクエリを変更...

0  CSSによると、IOS Mobileで入力ドロップダウンの背景に白い影を取り除く方法は?  ( How to get rid of white shadow on the background of select input dropdown in ios ) 
私の質問は、 -webkit-automation:なし、白い影が退職していません。 ただし、選択ボックスのキャレット矢印はもう表示されません。 どうやってこれを解決してください。ありがとう。 ...

1  マウスクリックの位置にある場所を決定します  ( Determine location at the position of mouse click ) 
私は、jQueryを使用してHTMLページのどこにでもメッセージをダブルクリックしてメッセージを残すことができるツールをまとめています。メッセージの位置付けを使ってやるために堅いブロックを打ちました。 現時点でテストしているコード: <事前> <コード> $...

0  WordPressテーマでデフォルトのメディアクエリをオーバーライドします  ( Override default media queries in wordpress theme ) 
私はサイトを持っていて、クライアントは~1300px vsのデフォルト768pxでモバイルメニューをキックしたいと思う。 私が本当に扱わなければならないのは、テーマ内のカスタムCSSフィールドです。現在、このサイトはこの file:/wp-content/ca...

0  なぜiPhoneの背景画像がめちゃくちゃになっていて、ブラウザで普通に見えますか?  ( Why my background images on iphone messed up and theyre appear normal on browse ) 
私はiPhoneの背景画像のサイズを変更しています。開発者モードになっているとき、彼らは正常に見えますが、iPhoneではぼやけてめちゃくちゃになっています(違いについては写真を見てください)。 最初の写真は、iPhoneのようになると思われるもので...

1  モバイルサイトのレスポンシブイメージを作成する方法  ( How to make responsive image for mobile sites ) 
私は携帯電話に答える必要があるウェブサイトを持っています。私は自分のデスクトップを使って作成しました。ブラウザウィンドウを調整すると、携帯電話に完璧に取り組んでいますが、実際の携帯電話で確認したとき:Microsoft-640それはモバイルビューには反応しませ...

19  肖像画と風景のブートストラップ列ビュー  ( Bootstrap column view in portrait and landscape ) 
私はBoosrapへの不適切なものであり、尋ねることを望んでいましたが、デバイスの画面が常に "MD"サイズの列を常に使用するとき、そして常に "XS"列を使用するのは縦にあるときにはありますか? ...

11  メディアクエリと幅としてREMユニットを使用する  ( Using rem units in media queries and as width ) 
Google Chrome(またはFirefox)でREMユニットを使用する場合、結果は予想外です。 I'Vは、ルートフォントサイズが10pxに設定されたページを設定して、ピクセルベースのデザインをHTML / CSSに簡単にします。 これは私のCSSです...

1  SASS - メディアクエリ  ( Sass media queries ) 
私は最近SASSを学び始めて、メディアクエリに問題がありました。いくつかのクラスは、トゥグルクラスのように、他のクラスもありません。 ここに取り組んでいるコードがあります: <事前> <コード> body { font-family: sans-serif...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有