Bootstrap 为移动的/响应式设计指定换行符

wztqucjr  于 2023-02-27  发布在  Bootstrap
关注(0)|答案(7)|浏览(144)

我需要在移动的/小视图中的特定点处换行。例如,我希望文本公社:CENON-SUR-VIENNE在冒号字符后断开。是否有一种语法允许手动指定,而不是让Bootstrap CSS自动执行?
下面是我的一段HTML代码,我已经在<head>中指定了 meta标记:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

截图:

HTML代码:

<div class="container">
  <div class="tab-content">
    <div class="col-lg-5">
      <div>
        <h4>Commune : CENON-SUR-VIENNE</h4>
      </div>
    </div>
  </div>
</div>
xytpbqjk

xytpbqjk1#

你可以试试这个。https://jsfiddle.net/5vwh46f8/1/
把第二个单词放在一个span中,并添加一个样式inline-block。

<div class="container">
<div class="tab-content">
<div class="col-lg-5">
  <div>
  <h4>Commune : <span>CENON-SUR-VIENNE</span></h4>
  </div>
</div>
</div>
</div>

<style>
h4 span{
display: inline-block;
} 
</style>
kzmpq1sx

kzmpq1sx2#

使用“响应”<br>标记:

<style>
br.responsive {
  display: inline; // Show BR tag for narrow screens
}

@media (min-width: 320px) { // or whatever you are after
  br.responsive {
    display: none; // Hide BR tag for wider screens
  }
}
</style>

Some text <br class="responsive" /> more text.
u0njafvf

u0njafvf3#

更直接的选择是使用Bootstrap内置的display classes,并根据屏幕大小隐藏<br />

<h4>Commune : <br class="d-md-none" />CENON-SUR-VIENNE</h4>

在span中使用列或 Package 内容是多余的;只需添加一个小显示类,并根据需要显示/隐藏。

juud5qan

juud5qan4#

若要避免在连字符处断开,请使用不断开的连字符。(U+2011)

h4 { width: 200px }
<h4 class="using regular hyphen">Commune : CENON-SUR-VIENNE</h4>
<hr>
<h4 class="using non-breaking hyphen">Commune : CENON‑SUR‑VIENNE</h4>
ni65a41a

ni65a41a5#

可以使用可用类“”在视口断点“”之间切换内容。例如:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<h4>Commune : <span class="visible-xs-inline"><br></span> CENON-SUR-VIENNE</h4>
svdrlsy4

svdrlsy46#

我认为媒体查询可以给予你更好的控制。如果你只想在桌面上中断(1)而不想在移动的上中断(2)呢?
1.

HTML:

<div class="col-12 text-center">   
    <h2>If many are doing something, <span class="break-mobile">it must be worthwhile</span></h2>
</div>

以及CSS:

@media (min-width: 700px) {
    .title-break {
        display: inline-block;
    }
}
lymnna71

lymnna717#

您可以通过减小字体大小以响应式管理

相关问题