Question

我没有在文档中找到任何指示我指向正确的方向，并且我试图避免使用columns，因为这可能会在措辞之间留下空白。

我使用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。

Answer 1

我从来没有看到这个问题，但是，我的消息是：

日期之间，你可以设置一个div clearfix，这个div只有md大小，所以你创建一个hidden-sm和hidden-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尺寸上分隔日期。

Answer 2

更直接的选择是使用 Bootstrap 内置的显示类并根据屏幕大小隐藏 <br />。

echo date('l') . "<br class='d-md-none' />" . date('F d, Y');

在跨度中使用列或包装内容是多余的；只需添加一个小的显示类并根据需要显示/隐藏。

Answer 3

以下是您的问题的解决方案

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

Bootstrap 4响应换行符

3 个答案: