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

回答

相关问题