モバイルデバイスに対応するブートストラップ

Question

モバイルデバイスで自動改行を設定するにはどうすればよいですか？私はテキストを切り捨てる修正することができますどのように HTML

<div class="container-fluid bg-1 text-center"> 
    <h2>MessageOfTheDay</br> 
    </br></h2> 
    <p style="margin-bottom: 100px;">SOME LOREMIPSUMDOLORSITAMET,CONSECTETUR</p> 
    <h1 style="margin-bottom: 100px;">XXXXXX</br> 
    SOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETUR</br> 
    SOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETUR</h1>  
</div> 

CSS

.bg-1{ 
background-color: black; 
background-size: cover; 
color: #ffffff; 
height: auto; 
min-height:620px; 
padding:10px; 
margin-top:0px;} 

body { 
    font: 20px "Montserrat", sans-serif; 
    color: #f5f6f7;} 

p {font-size: 20px;} 

.margin {margin-bottom: 10px;} 

h1,h2,h3{  
    margin-top: 0px; 
    margin-bottom: 0px;} 

.container-fluid{ 
    padding-top: 20px; 
    padding-bottom: 0px;} 

h1{font-size: 50px;} 

：現時点では私のコードは次のようになりますか？私は携帯電話の自動ブレーキラインを設定したい。

Image

Answer 1

これを行うには、CSSメディアクエリを使用することができます。画面が一定のサイズより小さい（または特定のサイズより大きい）場合、上位要素、クラスまたはIDである要素に100％の幅を設定し、その表示をinline-blockまたはblockに設定します。

このコードでは、.elementはすべて100％幅になり、画面サイズは600px以下になります。画面が600px以上の場合は、代わりにmin-width: 600pxを使用します。

@media (max-width: 600px) { 
    .element { 
    display: inline-block; 
    width: 100%; 
    } 
} 

Answer 2

それは修正Jankyのビットになりますが、これは動作するはずです...ブートストラップは、メディアクエリの中で構築されたと私たちは情報ベースの画面サイズを表示/非表示にすることができます...あなたが追加したい場合

<div class="visible-xs"><br /><br /></div> 

をか多分これもそれに打撃を与えると、それはあなたのために働いていた場合はお知らせので、以下にわからない、動作します：テキスト内の特定のポイントで破るには、次のような何かを行うことができます：

<br class="visible-xs" /> 

ブートストラップの「visible-xs」クラスは、画面サイズが768px未満の場合にのみコンテンツを表示するようにする必要があります...代替方法は、小さなディスプレイ上にコンテンツを隠す「hidden-xs」です。 :)ハッピーコーディング！

Answer 3

<div class="container-fluid bg-1 text-center"> 
    <h2>MessageOfTheDay</br> 
    </br></h2> 
    <p style="margin-bottom: 100px;" class='workdBreak'>SOME LOREMIPSUMDOLORSITAMET,CONSECTETUR</p> 
    <h1 style="margin-bottom: 100px;">XXXXXX</br> 
<span class='workdBreak'> 
    SOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETUR</br> 
    SOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETUR</h1>  
</div> 
</span> 

@media only screen and (max-width : 480px) { 
     .workdBreak{ 
     word-wrap:break-word; 
     } 
    } 

コンテナの幅よりも大きい場合に単語を区切るために使用されるワードラップcssプロパティ。 http://www.w3schools.com/cssref/css3_pr_word-break.asp

Bootsrapメディアクエリー

/==========モバイルファーストの方法==========/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) { 

} 

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) { 

} 

/* Small Devices, Tablets */ 
@media only screen and (min-width : 768px) { 

} 

/* Medium Devices, Desktops */ 
@media only screen and (min-width : 992px) { 

} 

/* Large Devices, Wide Screens */ 
@media only screen and (min-width : 1200px) { 

} 



/*========== Non-Mobile First Method ==========*/ 

/* Large Devices, Wide Screens */ 
@media only screen and (max-width : 1200px) { 

} 

/* Medium Devices, Desktops */ 
@media only screen and (max-width : 992px) { 

} 

/* Small Devices, Tablets */ 
@media only screen and (max-width : 768px) { 

} 

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) { 

} 

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) { 

} 

http://www.w3schools.com/cssref/css3_pr_word-wrap.asp