html - Bootstrap 4 响应式换行

标签 html css twitter-bootstrap bootstrap-4

我在文档中没有找到任何可以为我指明正确方向的内容,我正在努力避免使用 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 .

最佳答案

我从来没有看到这个问题,但是,我的建议是:

在日期之间,你可以设置一个 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 大小上分隔日期。

关于html - Bootstrap 4 响应式换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47107066/

相关文章:

html - 将 div-width 减小到它的内容宽度或上面/下面内容的宽度

html - 在 wordpress 的 div 中定位一个 div

html - 固定大小的 HTML 表格单元格,即使内容太大?

javascript - Bootstrap 崩溃和 ui-router

javascript - 将数据传递给模态( Bootstrap )

javascript - 意想不到的颜色?

html - Bootstrap 可折叠面板在添加样式时不起作用

javascript - 使用 flex-wrap 属性添加更多元素时元素不会被包裹

c# - ASP.net 菜单 - 如何在悬停时更改弹出图像

html - 为什么在 Bootstrap 中输入后没有换行符