自举：根据溢出

中心元件这是用于再现“问题”的最小代码：自举：根据溢出

<div class="container-fluid" style="text-align: center"> 
    <h1>REALLYREALLYREALLYLONGWORDIT'SNOTOVERYET</h1> 
    <button class="btn">REALLYLONGTEXTAGAINCANYOUEVENREADTHIS</a> 
</div>

的的jsfiddle是here。

现在，当屏幕尺寸足够大，它看起来罚款：

但是，如果屏幕尺寸变小，它开始寻找这样的：

enter image description here

文本溢出;有一个滚动条为它;但按钮仍然位于屏幕的可见部分，而不是整个“视图”。

我尝试更改overflow样式属性的值，但没有任何效果。实际上，这似乎不是溢出问题，而是容器'边界'的定义方式。我会如何解决这个问题？

来源

2014-09-05 Jayanth Koushik

你有没有尝试任何'@媒体'更改到CSS？ – Jay 2014-09-05 06:39:16

对不起，不知道'@ media'。请看看.- – 2014-09-05 06:40:44

是的，'@ media'用于调整屏幕大小。 bootstrap.css文件中有很多示例。 – Jay 2014-09-05 06:42:02

父类div是类名称通知的流体容器。这意味着，没有width属性指示该容器的尺寸。此外h1文本没有任何空格，所以文本不能中断，防止内容居中。因此，标题溢出并且button以窗口的可见部分为中心，恰好是由container-fluid div填充的所有空间。

了蝙蝠，我能想到的两种可能的解决方案：

设置一个min-width或width财产父DIV。
使用@media查询来调整特定分辨率上的文本和/或元素的大小。
在父div上使用float:left强制为全宽。集装箱液中含有负填充其中的容器没有：

来源

2014-09-05 06:52:03 Oriol

是的'min-width'设置为“足够大”的值似乎确实有效，但我不确定这是否是“最佳”方法。 – 2014-09-05 06:56:46

如果它的任何一个孩子溢出了，是不是可以让div伸展？看起来像那样会很理想。 – 2014-09-05 06:57:39

在Bootstrap上的变量css文件中，应该设置行的“宽度”，然后解决这些“最小宽度”问题。 – Oriol 2014-09-05 07:00:28

您的文字不包含空格“”。所有文本绝对需要一个空间！

来源

2014-09-05 06:50:46

我只是想模拟溢出。这很可能是一个长词和一个小屏幕。 – 2014-09-05 06:55:51

您可以在此小提琴

[jsFiddle][http://jsfiddle.net/akrzj7o9/6/] 

I think it can help to you

原因使用容器作为类，而不是容器流体看。

来源

2014-09-05 07:32:07 honey

在“h1”里面加入一个没有空格的单词。它不起作用。 – 2014-09-05 07:41:46

自举：根据溢出

回答

相关问题