Bootstrap 4 Reponsive Line Breaks

我在documentatin中找不到任何東西指向正確的方向，我試圖避免使用columns，因爲這可能會在字詞之間留下空隙。Bootstrap 4 Reponsive Line Breaks

我在使用echo date('l') . "<br>" . date('F d, Y');的網站頂部顯示天數日期。它顯示像這樣的日期，但中心：

Friday November 03, 2017

在小屏幕上，如手機，我想爲它不換行顯示爲Friday November 03, 2017。

我知道我可以很容易地只是這樣做，並實現它，但它在字與字之間產生間隙，因爲柱的大小甚至：

<div class="row"> 
<div class="col-sm-6 col-md-12"> 
<?php echo date('l'); ?> 
</div> 
<div class="col-sm-6 col-md-12"> 
<?php echo date('F d, Y'); ?> 
</div>

是否有任何其他方式來實現這一目標？

我的意思是差距是Friday [gap here due to column space] November 03, 2017。

來源

2017-11-04 Jesse Elser

我從來沒有看到這個問題，但是，我sugestion是這樣的：

日期間，您可以設置一個div clearfix，這個div僅是MD大小，所以你做一個隱藏sm和隱藏xs類如：

<div class="row"> 
     <div class="col-sm-6 col-md-12"> 
     <?php echo date('l'); ?> 
     <div class="clearfix hidden-xs hidden-sm"> </div> 


    <?php echo date('F d, Y'); ?> 
     </div> 
    </div>

它是正確的？ clearfix div只在lg和md尺寸上分開日期。

來源

2017-11-04 03:43:37

很好的解決方案，工作。只有'hidden-xs'和'hidden-sm'不再是Bootstrap 4中存在的類。我確實使用了相應的新類，它的工作方式類似於魅力。我使用的類是'd-none'，它是'display：none;'基本上，另一個是'd-md-block'，它將顯示在中等和更高的屏幕上。 –

太棒了，夥計！ Bootstrap對於前端開發來說非常快速。 –

哦，我絕對喜歡它，因爲這一點。它使開發變得更容易。 –

這裏是你的問題的解決方案

<div class="row"> 
    <div class="col-md-6 col-sm-12"> 
    <div class="row"> 
    <?php echo date('l'); ?> 
    </div> 
    </div> 
    <div class="col-md-6 col-sm-12"> 
    <div class="row"> 
    <?php echo date('F d, Y'); ?> 
    </div> 
    </div>

來源

2017-11-04 03:34:19

Bootstrap 4 Reponsive Line Breaks

回答

相關問題