Bootstrap responsive auf mobilen Geräten

Question

Wie kann ich automatische Zeilenumbrüche auf mobilen Geräten einrichten? Im Moment sieht mein Code wie: 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;} 

Wie kann ich Text beheben gestutzt? Ich möchte automatische Bremsleitung am Handy einstellen.

Image

Answer 1

Sie können Medienabfragen in CSS, dies zu tun verwenden. Sie würden das Element angeben, das das höher gelegene Element wäre, eine Klasse oder ID und dann seine Breite auf 100% und seine Anzeige auf inline-block oder block setzen, wenn der Bildschirm weniger als eine bestimmte Größe (oder größer als eine bestimmte Größe) aufweist.

Mit diesem Code wird jede .element 100% Breite dann die Bildschirmgröße ist 600px oder weniger. Wenn Sie möchten, dass der Bildschirm größer oder gleich 600px ist, verwenden Sie stattdessen min-width: 600px.

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

Answer 2

Es wäre ein bisschen ein Janky sein beheben, aber das sollte funktionieren ... Bootstrap uns/anzeigen kann mit integrierten Medien Abfrage Informationen basierend Bildschirmgröße verstecken ... also, wenn Sie will hinzufügen

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

oder vielleicht würde dieser auch funktioniert, nicht sicher auf den folgenden es so geben einen Schuss und lassen Sie uns wissen, ob es für Sie gearbeitet: brechen an einer bestimmten Stelle im Text, könnten Sie so etwas wie die folgenden tun :

<br class="visible-xs" /> 

Die Klasse "visible-xs" im Bootstrap sollte den Inhalt nur dann sichtbar machen, wenn die Bildschirmgröße weniger als 768 px beträgt ... die Alternative ist "hidden-xs", die Inhalte auf kleineren Displays versteckt. :) Glückliche Codierung!

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; 
     } 
    } 

Verwendete word-wrap css-Eigenschaft, um das Wort zu brechen, wenn es größer als die Breite des Containers ist.

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

Bootsrap Medienabfrage

/========== Mobile First Methode ==========/

/* 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) { 

}