的Rails：在渲染@trailers

在我的應用程序之間插入全寬動態DIV與JS，我呈現了一堆@trailers的：的Rails：在渲染@trailers

index.html.erb：

<div class="trailers infinite"> 
    <%= render @trailers %> 
</div>

_trailer.html .erb：

<div class="col-sm-6 col-lg-4 trailer"> 

</div>

當點擊一個預告片，我想追加一個警報拖車：

$('.trailer').click(function(){ 
    $(this).closest('.trailer').append($('.first-notification-message').slideDown()) 
});

除了我目前的方法搞亂了格式，因爲它只推出了一個@trailer列。我寧願平等地壓低一切。但不知道如何做到這一點，因爲不同的屏幕寬度有不同的列數。

任何想法？

來源

2015-12-14 Jackson Cunningham

你必須把一排圍繞各排，這樣，當一列長的高度，這將擴大整個行。因此，請使用each_with_index或each_slice循環@trailers以在其自己的.row s中打印列。

您還可以使每列都有一個min-height: 200px;，因此它總是會爲您添加的內容留出空間。

您也可以彈出模式對話框而不是更改列的高度。 http://getbootstrap.com/javascript/#modals

來源

2015-12-14 22:38:59 Chloe

因爲我必須考慮每個不同的屏幕尺寸，所以each_with_index不會相當混亂嗎？ –

是的，但這就是Bootstrap的工作原理。您可以爲大屏幕創建3列，如果瀏覽器縮小以觸發'.col-sm-6'，那麼屏幕上會有2列，然後是其自己的行中的一列，但這3個將位於相同的「.row」div內。這很麻煩，所以你可能想爲列設置「min-height」。你可能會在這個答案中找到有用的東西。 http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height – Chloe

好的謝謝。我會嘗試第一種方法，因爲使高度集增加太多空間 –

的Rails：在渲染@trailers

回答

相關問題