如何在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中显示两列？

回答

相关问题