引導幾個span6的未來不出現海誓山盟

我與引導擺弄周圍，爲我們的bug跟蹤Web應用程序一個漂亮的儀表板，但不能得到它，以顯示我想要的方式...引導幾個span6的未來不出現海誓山盟

信息中心會根據誰登錄顯示不同的統計數據，所以我的代碼需要抵抗，以允許使用不同數量的'小部件'，因爲我喜歡引用它們。這個想法是爲每個小部件使用'span6'容器，並且引導程序自動將它們並排（每行2個）堆疊起來。由於我不知道將顯示多少小部件，因此我沒有使用<div class="row">元素。

爲了使它有點困難，我想手風琴類添加到每個插件爲好，讓他們可以獨立摺疊

我開始投入<div class="span12">元素的一切，然後加入span6下面的元素。

而是到這裏寫的一切，我創建了bootply一個小例子：Bootply link

但是出於某種原因，我span6的不斷出現相互之下，而不是2×2彼此相鄰。另外，由於文本週圍的標籤（例如'0 Bug（s）關閉並分配給你，很好！'）的span6似乎太小，因此右側沒有圓角。

如果你可以通過這段代碼並讓我知道我錯誤的方向，我會非常感激。

謝謝！

來源

2013-08-23 Alex

這是否有幫助：http://stackoverflow.com/questions/12974143/responsive-2-span6-cant-side-by-side –

我只是升級到Bootstrap 3.0.0，它完美地處理了這一點。我定義了一個主要的col-lg-12（引導版v2中的'span12'的新名稱），並在其中放置了幾個col-lg-6，並且它們完全位於下一個並位於彼此之上。

來源

2013-09-19 11:12:46 Alex

好吧，我已經正確回答了您的問題。現在你正在接受一個完全不同的問題，你自己的答案。 – LeftyX

... 5個問題中，你已經接受了3個答案。不太好。 – LeftyX

那麼引導v3是我的問題的最佳解決方案。所以這就是爲什麼我將它標記爲任何其他人遇到同樣問題的最佳答案。 – Alex

如果你檢查CSS你可以看到，對於一個元素span6你有margin-left: 30px。

@media (min-width: 1200px) 
.span6 { 
    width: 570px; 
} 
@media (min-width: 1200px) 
[class*="span"] { 
    float: left; 
    min-height: 1px; 
    margin-left: 30px; 
}

你不能適應頁面中的所有內容。
您可以做的是在accordion內減少span6的邊距。

.accordion-inner > .span6 
{ 
margin-left: 0 !important; 
}

你可以看到它是怎麼回事works。

UPDATE：

我格子有點與您的代碼，並取得this。

希望它有幫助。

來源

2013-08-23 10:35:38 LeftyX

雖然這個工程，這並不是真正的解決方案，我正在尋找..我覺得必須有一個更好/更好的解決方案。 2 span6的應該可以放在span12或container div中，這也是他們在bootstrap例子中完成的方式。此外，我還注意到另一個問題，即您的解決方案無法解決（也是經過編輯的初始問題）：標籤右側的圓角被切斷。 – Alex

你必須使用'row-fluid'來實現這一點。我會更新我的答案。 – LeftyX

感謝LeftyX。雖然我在我的問題中聲明，我寧願不打擾使用行（或行流體）元素，但我沒有看到任何更好的解決方案。感謝您的幫助 – Alex

引導幾個span6的未來不出現海誓山盟

回答

相關問題