Text erscheint in zwei Zeilen, wenn die Browserbreite kleiner wird

Question

Mein Problem ist, dass der Text in zwei Zeilen erscheint, wenn die Browserbreite etwas kleiner wird.

Ich verwende das Bootstrap-Grid-System ... sollte also der Text nicht innerhalb des Rasters angepasst werden?

Ich habe versucht, zu ändern:

<div class="row"> 

Um

<div class="row col-sm-12"> 

aber dasselbe Ergebnis.

Mein Code-Schnipsel:

<div class="row"> 
    <div class="col-sm-8"> 
    <p>Posted by admin on this this date</p> 
    </div> 
    <div class="col-sm-4"> 
    <p class="text-right"><a href="#">One comment</a></p> 
    </div> 
</div> 

Screenshot der Ausgabe:

JSFiddle Demo

Answer 1

ändern sm-xs.

So, jetzt sehen Sie den Code wie folgt aus:

<div class="row"> 
    <div class="col-xs-8"> 
     <p>Posted by admin on this this date</p> 
    </div> 
    <div class="col-xs-4"> 
     <p class="text-right"><a href="#">One comment</a></p> 
    </div> 
</div> 

Sie haben die Bootstrap CSS documentation zuerst zu lesen. Es wird klar gesagt, dass das .col-sm- Spaltenpräfix ab der Breite von Small Devices Tablets (≥768px) funktioniert.

Answer 2

einfache Lösung dieses mit white-space:nowrap

p { 
white-space:nowrap; 
} 

p { 
 
    white-space:nowrap; 
 
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="row"> 
 
    <div class="col-sm-8"> 
 
    <p> 
 
     Posted by admin on this this date</p> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
    <p class="text-right"><a href="#">One comment</a></p> 
 
    </div> 
 
</div>

prüfen mit Demo

https://jsfiddle.net/x9g2th82/4/

Answer 3

Wie Rizki sagte. Sie benötigen col-sm-4 und col-sm-8 zu

<div class="row"> 
    <div class="col-xs-8"> 
    <p> 
     Posted by admin on this this date</p> 
    </div> 
    <div class="col-xs-4"> 
    <p class="align-right"><a href="#">One comment</a></p> 
    </div> 
</div> 

Check it in Aktion heraus zu ändern - https://jsfiddle.net/aLuv47bt/

Beifall.

Answer 4

Ändern Sie col-sm tp col-xs, um es in einer Zeile zu machen. Hier ist der Code.

<div class="row"> 
    <div class="col-xs-8"> 
    <p>Posted by admin on this this date</p> 
    </div> 
    <div class="col-xs-4"> 
    <p class="text-right"><a href="#">One comment</a></p> 
    </div> 
</div>