2014-09-05 78 views
0

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

<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样式属性的值,但没有任何效果。实际上,这似乎不是溢出问题,而是容器'边界'的定义方式。我会如何解决这个问题?

+0

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

+0

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

+0

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

回答

2

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

了蝙蝠,我能想到的两种可能的解决方案:

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

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

+0

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

+0

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

0

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

+0

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

0

您可以在此小提琴

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

I think it can help to you 

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

+0

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