余分な小さなブレークポイントを打つときの回転を無視する[二重化] -- html フィールド と css フィールド と twitter-bootstrap フィールド 関連 問題

Ignore rotation when hitting the extra small breakpoint [duplicate]












0
vote

問題

日本語

Mobileを使用するときは、2 <コード> 998887663 を6 <コード> 998887663 を含む行を持っています。 ただし、使用するときは、PC上で、私の列にテキストが回転しているとします。この問題は、 col-xs を押すと、テキストが水平に留まるときに発生したくないということです。これを行う方法はありますか? ありがとう!

サンプルHTML:

<事前> <コード> <div class="row"> <div class="col-md-2"> <div class="row"> <div class="col-xs-6 skew-text"> AAAA </div> <div class="col-xs-6 skew-text"> AAAA </div> </div> </div> <div class="col-md-2"> <div class="row"> <div class="col-xs-6 skew-text"> AAAA </div> <div class="col-xs-6 skew-text"> AAAA </div> </div> </div> <div class="col-md-2"> <div class="row"> <div class="col-xs-6 skew-text"> AAAA </div> <div class="col-xs-6 skew-text"> AAAA </div> </div> </div> <div class="col-md-2"> <div class="row"> <div class="col-xs-6 skew-text"> AAAA </div> <div class="col-xs-6 skew-text"> AAAA </div> </div> </div> <div class="col-md-2"> <div class="row"> <div class="col-xs-6 skew-text"> AAAA </div> <div class="col-xs-6 skew-text"> AAAA </div> </div> </div> <div class="col-md-2"> <div class="row"> <div class="col-xs-6 skew-text"> AAAA </div> <div class="col-xs-6 skew-text"> AAAA </div> </div> </div> </div>

クラス:

<事前> <コード> .skew-text { -ms-transform: rotate(7deg); -webkit-transform: rotate(7deg); transform: rotate(-90deg); white-space: nowrap; }
英語

I have a row, containing 6 col-md-2, with each col containing 2 col-xs-6, in order to wrap them into two columns when using mobile. However, when using, lets say, on a PC, my columns have the text rotated. The problem is that I don't want this to happen when hitting the col-xs, I want the text to stay horizontal. Is there any way to do this? Thanks!

Sample html:

<div class="row">   <div class="col-md-2">   <div class="row">   <div class="col-xs-6 skew-text">     AAAA   </div>   <div class="col-xs-6 skew-text">     AAAA   </div>   </div>   </div>     <div class="col-md-2">   <div class="row">   <div class="col-xs-6 skew-text">     AAAA   </div>   <div class="col-xs-6 skew-text">     AAAA   </div>   </div>   </div>     <div class="col-md-2">   <div class="row">   <div class="col-xs-6 skew-text">     AAAA   </div>   <div class="col-xs-6 skew-text">     AAAA   </div>   </div>   </div>     <div class="col-md-2">   <div class="row">   <div class="col-xs-6 skew-text">     AAAA   </div>   <div class="col-xs-6 skew-text">     AAAA   </div>   </div>   </div>     <div class="col-md-2">   <div class="row">   <div class="col-xs-6 skew-text">     AAAA   </div>   <div class="col-xs-6 skew-text">     AAAA   </div>   </div>   </div>     <div class="col-md-2">   <div class="row">   <div class="col-xs-6 skew-text">     AAAA   </div>   <div class="col-xs-6 skew-text">     AAAA   </div>   </div>   </div> </div> 

Class:

.skew-text {     -ms-transform: rotate(7deg);     -webkit-transform: rotate(7deg);     transform: rotate(-90deg);     white-space: nowrap; } 
</div
        

回答リスト

0
 
vote
vote
ベストアンサー
 

メディアクエリを使用し、そのブレークポイントの画面幅を超えたときにのみ自分のスタイルを適用する必要があります。

<事前> <コード> @media (min-width: 768px) { .skew-text { -ms-transform: rotate(7deg); -webkit-transform: rotate(7deg); transform: rotate(-90deg); white-space: nowrap; } }

PROP:基本変換のためのすべてのベンダープレフィックスを必要としない

 

You'll need to use a media query and only apply your styles when over that breakpoint's screen width:

@media (min-width: 768px) {     .skew-text {         -ms-transform: rotate(7deg);         -webkit-transform: rotate(7deg);         transform: rotate(-90deg);         white-space: nowrap;     } } 

Protip: You don't need all those vendor prefixes for basic transforms

</div
 
 

関連する質問

7  関数の前にプラス記号は何ですか? [複製]  ( What is the plus sign before a function ) 
この質問はすでにここで回答を持っています JavaScript Plus関数式 (3回答) 閉じられた 6年...

-4  ブートストラップカルーセルスライダーの応答性が働いていません  ( Bootstrap carousel slider responsiveness is not working ) 
こんにちは私は私のスライダーにブートストラップカルーセルスライダーを使ったが、モバイルの反応性が機能していない。私のコードは: <事前> <コード> <div class="mobileimage"> <div id="myCarousel" class...

0  親CSSをオーバーフローするブートストラップテーブル  ( Bootstrap table overflowing parent css ) 
テーブルの内側にあるdivの他のものを含むブートストラップ行を持っています。未知の理由で、テーブルを親のあふれを止めるように管理できません。高さ100%を使用すると、テーブルは常にオーバーフローします。ただし、親DIVに特定の高さがある場合は機能します。 <事...

1  bootstrap typeahead.jsはHTMLフォームフィールドonleaveで既存のデータの内容を削除します  ( Bootstrap typeahead js deletes content of existing data in html form field onlea ) 
私はすでにデータを持っている形式でタイプヘッドを使用しています。問題は次のとおりです。これを入力せずにフィールドを入力せずにフィールドを残したとき、それはTypeAheadによって空にされます。 フォーム要素: <事前> <コード> int main() { ...

2  ブートストラップのタブ - 左の身長  ( Bootstraps tabs left height ) 
tabs-left Classでブートストラップタブを使用します。ただし、十分な大きさの内容がメニューとコンテンツの境界がエッジに到達しない場合は、メニューを伸ばすために何をする必要がありますか? height:100% の設定は、 float: le...

3  変更を失うことなくブートストラップをカスタマイズする方法  ( How can i customise bootstrap without losing the changes ) 
BOWERを使用してブートストラップを管理し、デフォルトのブートストラップの外観(色、フォントサイズなど)を変更したいと思います。これが私のワークフローです: edit bower_components/bootstrap/less/variables...

0  2折りたたみメニューのナビゲーションを作成する方法[複製]  ( How to create a navbar with 2 collapse menu ) 
この質問はすでにここで回答を持っています 複数のブートストラップの統合3 Navbarメニュー (1回) 左...

0  Twitterブートストラップ - IEの左右のマージン  ( Twitter bootstrap left and right margin in ie ) 
Twitterから最新のブートストラップを使用しています。 私は私のサイトを設計するための初期段階にあります。 問題は、IE 7-8を除く他のブラウザのサイトを表示するとき、すなわちOK 7-8では、体の左右両側に余分なマージンが含まれているため、すべてのコ...

0  ブートストラップのような流体レイアウトを作成します  ( Create fluid layout like bootstrap ) 
私はHTML / CSSに新しいので、私はおそらくこれを添加しています。私はBootstrapを使っていますが、初日を使っています。このリンクの「Fluid Layout」の下にある写真のデザインを正確に模してみてください。 http: //getbootst...

12  Bootstrapメニューが最初に消えるが、ULスタイルを設定しないようにする  ( Bootstrap menu disappears after first click setting the ul style to none ) 
私はBootstrapを使って新しいWordPressテンプレートを作ろうとしています。ドロップダウンメニューが正しく機能しません。 2番目のクリック後に表示が取得されます。 私はそれを理解しようとしましたが、私はできませんでした! これが私のウェブサイトのア...




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