面板主體引導

我想列出我的瀏覽器上的設備上的所有文件的一致顯示，我已經成功地給每個文件一個合適的HTML5標籤例如面板主體引導

path = "/Files/f/extensions/folder.png"; 
     if (f.listFiles() != null)// cant access some files (security issues 
            // like d:/reposotories).. 
      tag = "<div class=\"col-sm-6 col-md-4 \" >" + "<div class=\"panel panel-default\" >" + "<div class=\"panel-heading\" > <h2>" 
        + "@[email protected] </h2>" + "</div>" + "<div class=\"panel-body\" >" 
        + "<a href=\"@[email protected]\"><img src=\"@[email protected]\" class=\" img img-responsive\" /></a>" 
        + "</div><div class=\"panel-footer\" > " + "<ul>" + " <li> " + f.listFiles().length + " Files</li> " 
        + " <li> last modified : @[email protected]</li> " + "</ul>" + "</div>" + "</div>" + "</div>";

我用它來顯示目錄。和

(extension.equalsIgnoreCase("gif") || extension.equalsIgnoreCase("jpg") || extension.equalsIgnoreCase("jpeg") 
       || extension.equalsIgnoreCase("png")) { 
      tag = "<div class=\"col-sm-6 col-md-4 \" >" + "<div class=\"panel panel-default\" >" + "<div class=\"panel-heading\" > <h2>" 
        + "@[email protected] </h2>" + "</div>" + "<div class=\"panel-body\" >" 
        + "<a href=\"@[email protected]\"><img src=\"@[email protected]\" class=\" img img-responsive\" /></a>" 
        + "</div><div class=\"panel-footer\" > " + "<ul>" + " <li> size : @[email protected]</li> " + " <li> last modified : @[email protected]</li> " 
        + "</ul>" + "</div>" + "</div>" + "</div>";

以顯示圖像，其中所有@ XXX @是根據需要將被替換的佔位符，然而存在該板的主體採取不同的尺寸而這破壞了頁面的顯示的問題， enter image description here

並且由於第二面板自動地調整本身到該列中的第二行中的匹配圖像不能用於

來源

2014-12-13 user4346015

兩張圖像是否堆疊？ – moikey 2014-12-13 18:24:40

yes和no的問題是，我想對所有的板體固定大小無論什麼內容，他們持有 – user4346015 2014-12-13 18:44:35

您必須添加自定義類e.g固定-300是固定寬度。請參閱下面的CSS樣式。

tag = "<div class=\"col-sm-6 col-md-4 fixed-300\" >" 
+ "<div class=\"panel panel-default\" >" 
+ "<div class=\"panel-heading text-center\" >" 
+ "<h2>@[email protected]</h2>" 
+ "</div>" 
+ "<div class=\"panel-body\" >" 
+ "<a href=\"@[email protected]\"><img src=\"@[email protected]\" class=\" img img-responsive\" /></a>" 
+ "</div>" 
+ "<div class=\"panel-footer\" > " 
+ "<ul>" 
+ "<li> size : @[email protected]</li> " 
+ "<li> last modified : @[email protected]</li> " 
+ "</ul>" 
+ "</div>" 
+ "</div>" 
+ "</div>";

您也可以在englobe一個div所有標籤：

<div class="row equal">....</div>

CSS樣式：

.equal, .equal > div[class*='col-'] { 
    display: -webkit-flex; 
    display: flex; 
    flex:1 1 auto; 
} 
.fixed-300 { 
    width: 300px; 
}

檢查這個link看到它的樣子。

如果您需要更詳細的解釋，請給我一個手勢。我會很樂意提供幫助。

希望它有用！

來源

2014-12-13 19:20:05 Academia

感謝這麼真棒 !!!!!!!!!!!!!!!!!!! !!!! – user4346015 2014-12-13 20:33:43

@ user4346015我的榮幸!!! – Academia 2014-12-13 20:34:17

如您所願，我改變了顯示錶也沒有工作，給了一個更好的結果，但與空間：[樣子]（http://jsfiddle.net/hmdv3125/1/）如何你的代碼的行爲 – user4346015 2014-12-13 23:18:06

這是由元件的動態高度引起的。如果你給每個元素一個具有特定高度的類，它應該解決這個問題。看到這example（響應，所以拉容器）。

我已經給每個項目的一類，它包含50像素的高度：

.sameHeight{ 
    height: 50px; 
}

和引導處理寬度就好了。

來源

2014-12-13 19:13:22 moikey

面板主體引導

回答

相關問題