當瀏覽器寬度變小時文本出現在兩行中

我的問題是，當瀏覽器寬度變小一些時，文本開始出現兩行。當瀏覽器寬度變小時文本出現在兩行中

我使用引導網格系統......所以不應該在網格內調整文本？

我試圖改變：

<div class="row">

要

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

但同樣的結果。

我的代碼片段：

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

問題的截圖：

JSFiddle Demo

來源

2017-01-27 user4756836

變化sm到xs。

所以，現在你的代碼是這樣的：

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

你必須閱讀Bootstrap CSS documentation第一。明確指出，.col-sm-列前綴將從Small Devices Tablets（≥768px）的寬度開始工作。

來源

2017-01-27 04:08:30

簡單的解決這個與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>

請與演示

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

來源

2017-01-27 03:59:53

似乎沒有解決它 – user4756836

就像Rizki說的。您需要更改COL-SM-4和COL-SM-8這種

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

檢查它在行動 - https://jsfiddle.net/aLuv47bt/

乾杯。

來源

2017-01-27 04:17:42

將col-sm tp col-xs更改爲一行。這是代碼。

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

來源

2017-01-27 06:13:22 Riz

當瀏覽器寬度變小時文本出現在兩行中

回答

相關問題