如何在HTML中顯示兩列？

我想使用HTML（響應）顯示2列。第一列是事件的名稱，而第二列是事件的時間。我如何去做這件事？下面是我附上的截圖。如何在HTML中顯示兩列？

2017-10-29 Sabrina Said

您使用的香草HTML或CSS框架（引導等）？ – AppleCrazy

我正在使用Bootstrap來開發此功能。 –

無法理解你爲什麼不知道Bootstrap的網格佈局系統：http://getbootstrap.com/docs/4.0/layout/grid/ –

-2

您需要使用一個表。類似這樣的：

<!DOCTYPE html> 
<html> 
<body> 

<table style="width:100%"> 
    <tr> 
    <th>Name</th> 
    <th>Time</th> 
    </tr> 
    <tr> 
    <td>Text</td> 
    <td>Text</td> 
    </tr> 
    <tr> 
    <td>Text</td> 
    <td>Text</td> 
    </tr> 
    <tr> 
    <td>Text</td> 
    <td>Text</td> 
    </tr> 
</table> 

</body> 
</html>

來源

2017-10-29 04:21:20

我覺得在他需要的時候使用表格不會有反應。 –

您必須創建一個容器，添加一行，並在該行中創建兩列。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col"> 
 
     Column 1 
 
    </div> 
 
    <div class="col"> 
 
     Column 2 
 
    </div> 
 
    </div> 
 
</div>

瞭解更多關於自舉電網系統，包括如何調整列寬，在這裏：https://getbootstrap.com/docs/4.0/layout/grid/

來源

2017-10-29 04:26:40 AppleCrazy

您忘記了'.row'的結束標記 –

現在應該修復 – AppleCrazy

那麼第2列旁邊的ceret down圖標怎麼辦？我是否需要爲此添加一個新列？ @AppleCrazy –

您可以通過實現這個「表」標籤：

<table> 
    <tr> 
    <td>column 1</td> 
    <td>column 2</td> 
    </tr> 
</table>

來源

2017-10-29 04:36:14

創建一個容器然後把它放在柱子裏面。瀏覽器的整個寬度等於12列，如果您需要兩列，然後將12列除以2，那麼答案是6列。這是響應式引導程序2列的示例。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 


<div class="container"> 
    <div class="col-lg-6 col-md-6 col-sm-12" style="background-color: red"> 
     Column 1 
    </div> 
    <div class="col-lg-6 col-md-6 col-sm-12" style="background-color: green"> 
     Column 2 
    </div 
<div>

輸出：

來源

2017-10-29 05:00:46

<div class="container"> 
    <div class="col-lg-6 col-md-6 > 
     Column 1 
    </div> 
    <div class="col-lg-6 col-md-6 > 
     Column 2 
    </div 
<div>

來源

2017-11-06 01:47:46

這段代碼做了什麼？ –

這是一塊蛋糕用Bootstrap。

<div class="container"> 
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
     First Column 
    </div> 
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
     Second Column 
    </div> 
<div>

來源

2017-11-07 06:13:11

如何在HTML中顯示兩列？

回答

相關問題