自舉：根據溢出

中心元件這是用於再現「問題」的最小代碼：自舉：根據溢出

<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

自舉：根據溢出

回答

相關問題