next.js 如何在Bootstrap中内联多个元素？

l3zydbqr 于 2022-11-05 发布在 Bootstrap

关注(0)|答案(1)|浏览(119)

如何在Bootstrap中内联多个〈p〉元素？
我的当前代码：

<div className="container d-inline-flex">
        <p className="text-nowrap">
          This is sentence number 1.
        </p>
        <p className="text-nowrap">
          This is sentence number 2, which is a bit longer. 
        </p>
        <p className="text-nowrap">
          This is sentence number 3 and is the longest sentence by far. 
        </p>
    </div>

The texts overflow the sidebar due to "text-nowrap". However, "text-wrap" would wrap the text to the next line of the tag instead at the very beginning of the new line.
你能解决我的可耻的，自满的努力？
额外的好处：我期待着绕过默认的〈p〉行为，它忽略了多个空格
即〈p〉“你好邻居”-〉“你好邻居”

next.js

来源：https://stackoverflow.com/questions/74166660/how-do-you-inline-multiple-p-elements-in-bootstrap

1条答案

按热度按时间

brtdzjyr1#

你还没有提供任何CSS也没有Bootstrap的版本，这是非常糟糕的问题。
但是，您应该了解显示属性，有两种方法可以通过CSS实现您想要的结果：

<style>
.text-nowrap{
display: inline!important;
}
</style>

<p class="text-nowrap">test</p>
<p class="text-nowrap">test</p>

或者通过在HTML元素上提供Bootstrap的类：

<p class="d-inline"> test </p>

只是要注意：套用至所有中断点（从xs到xl）的显示公用程式类别中没有中断点缩写。这是因为这些类别是从min-width: 0;及以上套用的，因此不受媒介查询的限制。不过，其馀的中断点会包含中断点缩写。
因此，类的命名格式为：

.d-{value} for xs
.d-{breakpoint}-{value} for sm, md, lg, and xl.

其中，value为以下值之一：

none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex

媒体查询会影响具有给定断点或更大断点的屏幕宽度。例如，.d-lg-none设置显示：无;在lg和xl屏幕上。
至于空格（使其显示），实际上有3种方法实现它：

通过添加 ：
There are two spaces between these  words.
通过添加&ensp;：
There are two spaces between these&ensp;words.
通过使用<pre> </pre>-您只需在标记内键入内容即可。

赞(0）回复(0）举报 2022-11-05

我来回答

next.js 如何< p>在Bootstrap中内联多个元素？

1条答案

相关问题

热门标签

最新问答