1. 首頁
  2. 問答
  3. 使用引導程序創建網絡表

使用引導程序創建網絡表

2017-02-22 50 views
-4

我正在創建一個應能夠在桌面，智能手機和平板電腦上運行的網絡表。使用引導程序創建網絡表

因此我使用HTML，CSS，PHP和Bootstrap-package。

除此之外，我使用800像素以下的表格更改爲列的選項：http://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table。

有2個問題，我不知道如何解決這些問題：

1：左欄（Bundesland）導致的問題。請看附件（圖1和圖2）。第一個圖像中的列是可以的。在圖像2中，數據必須在每個框中顯示。

  1. 我不知道如何調整框的大小，即左右面板邊框之間的間隙已關閉。

您有什麼想法嗎？

非常感謝！

此致敬禮。

康拉德

來源

2017-02-22 UBA_KP

+0

我沒有看到任何附件？ :) –

+0

我們可以看到你的html嗎？這是td tags @ Bundesland＆Ort中的簡單錯字嗎？ – mickmackusa

+0

現在你可以看到附件了！ :) –

回答

0

要在左側和右側的列使用類「行」去掉墊襯。因此，例如：

.foo, 
 
.bar { 
 
    background: #ccc; 
 
    margin-bottom: 15px; 
 
} 
 

 
.foo .col-md-12, 
 
.bar .col-md-12 { 
 
    background: #ddd; 
 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="foo"> 
 
    <div class="container-fluid"> 
 
    <div class="col-md-12"> 
 
     Without row 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="bar"> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
     With row 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

欲瞭解更多信息：https://v4-alpha.getbootstrap.com/layout/grid/#nesting

來源

2017-02-22 12:39:03 Hewlett

+0

非常感謝@Hewlett，它適用於窗口少於800像素。現在它不適用於桌面窗口和窗口。主體元素與標題元素一樣大。你有好主意嗎？ –

+0

@UBA_KP，你能不能顯示一個截圖？除此之外，您還可以添加定位到桌面上的填充的其他樣式。 – Hewlett

+0

這裏無法添加屏幕截圖。你有一個想法如何在「添加評論」字段中做到這一點？ –

0

現在，它的工作原理與

table {border-collapse: separate;}

我還使用了片斷

<div class="row">

來源

2017-02-28 12:21:29

相關問題

 相關問題