我们怎样才能让引导行/列看起来像一张桌子？答案

【问题标题】：How could we make bootstrap rows/columns look like a table?我们怎样才能让引导行/列看起来像一张桌子？
【发布时间】：2016-11-01 04:18:03
【问题描述】：

My #1 try 因 col 中的填充而失败。

My #2 try 也是因为我一定是在做傻事。

这是想要的结果：

有人可以帮我吗？请尽可能避免重写引导规则。

【问题讨论】：

你为什么不使用display:table和display:table-cell
你为什么不简单地使用bootstrap tables？一切都已经为你做好了
表格在用于正确目的时并不邪恶。这对我来说似乎是正确的目的。
找到发布的DEMO，正是你需要的

标签： twitter-bootstrap css

【解决方案1】：

请查看工作演示。这正是您所需要的....希望对您有所帮助。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container" >
  <div class="row" style="border: 1px solid grey;">
    <div class="col-md-4  col-sm-4  col-xs-4 text-center" style="border-right:1px solid grey">
     <img src="https://www.mozilla.org/media/img/styleguide/identity/firefox/guidelines-logo.7ea045a4e288.png" width="20" height="20" class="img-circle"/>
    </div>
    <div class="col-md-4 col-sm-4  col-xs-4 text-center"  style="border-right:1px solid grey">
     <img src="https://www.mozilla.org/media/img/styleguide/identity/firefox/guidelines-logo.7ea045a4e288.png" width="20" height="20" class="img-circle"/>
    </div>
    <div class="col-md-4 col-sm-4  col-xs-4  text-center"  style="border-right:1px solid grey">
      <img src="https://www.mozilla.org/media/img/styleguide/identity/firefox/guidelines-logo.7ea045a4e288.png" width="20" height="20" class="img-circle"/>
    </div>
  </div>
 <div class="row" style="border: 1px solid grey;background-color:#f3f3f3">
    <div class="col-md-4 col-sm-4  col-xs-4 text-center"  style="border-right:1px solid grey">
    <strong>Yes</strong>
    </div>
    <div class="col-md-4  col-sm-4  col-xs-4 text-center"  style="border-right:1px solid grey">
       <strong>Yes</strong>
    </div>
    <div class="col-md-4  col-sm-4  col-xs-4 text-center"  style="border-right:1px solid grey">
         <strong>Yes</strong>
    </div>
  </div>
</div>

【讨论】：

这段代码在两行之间做了一个粗的水平边框。

【解决方案2】：

您可以使用table-responsive：

<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="table-responsive">

    <table class="table table-bordered table-striped">
        <thead>
            <tr> <td></td> <th>Chrome</th> <th>Firefox</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Android</th>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-muted" rowspan="3" style="vertical-align:middle">N/A</td>
                <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
                <td class="text-muted">N/A</td>
            </tr>
            <tr>
                <th scope="row">iOS</th>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-muted">N/A</td>
                <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
            </tr>
            <tr>
                <th scope="row">Mac OS X</th>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
            </tr>
            <tr>
                <th scope="row">Windows</th>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
            </tr>
        </tbody>
    </table>

</div>
</body>
</html>

【讨论】：

最佳答案，使用Bootstrap官方方式

【解决方案3】：

这是解决您问题的代码，可能对您有帮助。

检查这个小提琴链接JSFiddle

HTML 代码

<div style="width: 900px; margin: 0 auto;display:table-cell; border: 1px solid red;">
  <div class="row">
    <div class="col-md-4 tableColumnDiv">
        <img src="" alt="image"> Some content here. Hello stackoverflow!
    </div>
    <div class="col-md-8 tableColumnDiv">
        Some content here. Hello world!
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 tableColumnDiv">
        <img src="" alt="image"> Some content here. Hello stackoverflow!
    </div>
    <div class="col-md-8 tableColumnDiv">
        Some content here. Hello world!
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 tableColumnDiv">
        <img src="" alt="image"> Some content here. Hello stackoverflow!
    </div>
    <div class="col-md-8 tableColumnDiv">
        Some content here. Hello world!
    </div>
  </div>
</div>

CSS 代码

.image-column {
   border: 1px solid black;
}
.tableColumnDiv{
  display:table-cell;
  border: 1px solid black;
}

【讨论】：

【解决方案4】：

表格 -> 行/列的基本原则是，在特定的行中，无论内容是什么，列的高度都应该相等。

您可以使用引导网格制作表格 -> 行/列结构，但会有等高列的问题。

因此，为此目的，即对于相等的列，您可以使用 flexbox 属性。（它在 ie9 和更少的版本中不起作用，所以请确保它的使用。）

Check this fiddle here

只需将以下简单的 CSS 添加到父容器（用于小提琴上方的完整演示结帐），

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

Here is the reference

【讨论】：

【解决方案5】：

在您的第二个示例中，我更改了图像列和内容列，它的工作原理..试试这个它可能会帮助你...

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
    /* CSS used here will be applied after bootstrap.css */
    
    .row {
        display: flex;
    }
    
    .image-column {
        border: 1px solid black;
    }
    
    .content-column {
        border: 1px solid black;
    }
</style>
<div style="width: 90%; margin: 0 auto;">

    <div class="row">
        <div class="col-md-4 image-column">
            <img src="http://icons.iconarchive.com/icons/google/chrome/72/Google-Chrome-icon.png" alt="image"> Some content here.
        </div>

        <div class="col-md-8 content-column">
            Some content here. Hello world!
        </div>
    </div>

    <div class="row">
        <div class="col-md-4 image-column">
            <img src="http://icons.iconarchive.com/icons/google/chrome/72/Google-Chrome-icon.png" alt="image"> Some content here.
        </div>
        <div class="col-md-8 content-column">
            Some content here. Hello world!
        </div>
    </div>

    <div class="row">
        <div class="col-md-4 image-column">
            <img src="http://icons.iconarchive.com/icons/google/chrome/72/Google-Chrome-icon.png" alt="image"> Some content here.
            </div>
            <div class="col-md-8 content-column">
                Some content here. Hello world!
            </div>
        </div>

    </div>

【讨论】：

【解决方案6】：

下面的方法怎么样：

bootply example

它使用 CSS 设置显示，因此列的高度相同。在以下链接找到 CSS：

equal height columns example

【讨论】：

【解决方案7】：

试试这个并阅读 CSS 区域中的 cmets：http://www.bootply.com/byopZWzR2K

此代码将解决任何单元格的垂直对齐问题。

这里也是同样的代码：

CSS

/* This play-area class is just for testing and aligned the width of this table */
.play-area{width:400px;margin:19px auto}
.play-area img{height:32px;}

.make-this-table{border:1px solid #d7d7d7;overflow:hidden;} /* this to give our table outer border */
.make-this-table .row{border-top:1px solid #d7d7d7;background:#e7e7e7} /* This simple to add separator line between each row also to give each row background color */
.make-this-table .row:nth-child(1){border:none;background:#c5c5c5} /* This to ignore the separator for the first row since it will be the head of this table. You can remove this line to have this table without head */


/* This code to make rows in alternative background colors */
.make-this-table .row:nth-child(even) {background:#fff}


/* This to make the text vertical align in middle if the next column in the same row has more than one line while the first column just one line like the second row in this table .. You can remove this line if you like to make the alignment at the top of the cell. */
.make-this-table .row{align-items: center;display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}

-

HTML

<div class="play-area">
<div class="make-this-table">

  <div class="row">
    <div class="col-md-4 col-xs-4">
        <img src="http://www.chromium.org/_/rsrc/1438811752264/chromium-projects/logo_chrome_color_1x_web_32dp.png" alt="" style="">
    </div>
    <div class="col-md-8 col-xs-8">
        <img src="https://www.mozilla.org/media/img/styleguide/identity/firefox/guidelines-logo.7ea045a4e288.png" alt="" style="width:32px;">
    </div>
  </div>

  <div class="row">
    <div class="col-md-4 col-xs-4">
        Chrome Browser.
    </div>
    <div class="col-md-8 col-xs-8">
        Firefox Browser.
    </div>
  </div>

  <div class="row">
    <div class="col-md-4 col-xs-4">
        Updated.
    </div>
    <div class="col-md-8 col-xs-8">
      Not Updated<br>New line.<br>Now firefox is updated.
    </div>
  </div>

  <div class="row">
    <div class="col-md-4 col-xs-4">
        Try new line.
    </div>
    <div class="col-md-8 col-xs-8">
      Adding image to break line: <img src="http://www.w3schools.com/images/compatible_edge.gif" alt="">
    </div>
  </div>

  <div class="row">
    <div class="col-md-4 col-xs-4">
        Keep trying ..
    </div>
    <div class="col-md-8 col-xs-8">
        Also keep trying Ya labba ..
    </div>
  </div>


</div>
</div>

【讨论】：

【解决方案8】：

Here is the working code: Bootply link

两步流程：

为.row 添加一个额外的类(.row-table) 并分配以下css 属性。

.row-table{ display:flex;  
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;}

向我们的 col-x-x 添加一个额外的类 .table-cell 并分配以下 css 属性。

.table-cell{ border-color: black; border-style:solid; border-width:1px 0 0 1px;}
.row-table .table-cell:last-child{ border-right-width:1px;}
.row-table:last-child .table-cell{ border-bottom-width:1px;}

注意：列宽取决于您使用的列网格类。

【讨论】：

【解决方案9】：

就像大家之前说的，你可以使用表格标签。但是如果你仍然想使用 div，你可以使用 Bootstrap 的网格类来确保你的表格在每个屏幕尺寸上都可以很好地显示。我像这样编辑了你的代码：

<style>
    .table {
        width: auto;
        margin: 0 auto;
        border: 1px solid red;
    }
    .table .row {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .table .row div {
        border: 1px solid red;
    }
</style>

<div class="table">

    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4">
            <img src="image1.jpg" alt="image1">
            Some content here. Hello stackoverflow!
        </div>
        <div class="col-lg-8 col-md-8 col-sm-8">
            Some content here. Hello world!
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4">
            <img src="image2.jpg" alt="image2">
            Some content here. Hello stackoverflow!
        </div>
        <div class="col-lg-8 col-md-8 col-sm-8">
            Some content here. Hello world!
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4">
            <img src="image3.jpg" alt="image3">
            Some content here. Hello stackoverflow!
        </div>
        <div class="col-lg-8 col-md-8 col-sm-8">
            Some content here. Hello world!
        </div>
    </div>

</div>

如您所见，我在 .row 上使用了 display: flex; 和 flex-wrap: wrap; 使单元格的高度相同。

祝你好运！

【讨论】：

【解决方案10】：

你可以使用行显示：表格列显示：表格单元格

【讨论】：

【解决方案11】：

您是否尝试过使用 Bootstrap 表？如果没有，我建议您这样做并将<td>s 设置为您想要的宽度。例如：

<tr class="something">
<td class="col-md-2">A</td>
<td class="col-md-3">B</td>
<td class="col-md-6">C</td>
<td class="col-md-1">D</td>

Source

【讨论】：

是的，我也推荐使用 Bootstrap 表。毕竟，您需要更改标记的行为，才能像表格一样相应地工作。

【解决方案12】：

Aigzy 和 Waldir 都提供了很好的解决方案，但他们犯了同样的错误。他们提出的解决方案没有响应。在移动设备上，“表格”将不再可读。为避免这种情况，您需要将列再嵌套一层，如下所示：

<div class="row">
  <div class="col-md-4">
    <div class="col-md-12"> (image) </div>
    <div class="col-md-12"> (text) </div>
  </div>
  <div class="col-md-4">
    <div class="col-md-12"> (image) </div>
    <div class="col-md-12"> (text) </div>
  </div>
  <div class="col-md-4">
    <div class="col-md-12"> (image) </div>
    <div class="col-md-12"> (text) </div>
  </div>
</div>

http://www.bootply.com/jYSePqMDGi

【讨论】：

【解决方案13】：

我对您的代码进行了一些更改。但我不知道这是否符合您的期望：

HTML：

<div class="container">
  <div class="row">
    <div class="image-column col-md-4">
      <img src="" alt="image" />
    </div>
    <div class="image-column col-md-4">
      <img src="" alt="image" />
    </div>
    <div class="image-column col-md-4">
      <img src="" alt="image" />
    </div>
  </div>

  <div class="row">
    <div class="content-column col-md-4">
      Some content here. Hello world!
    </div>
    <div class="content-column col-md-4">
      Some content here. Hello world!
    </div>
    <div class="content-column col-md-4">
      Some content here. Hello world!
    </div>
  </div>
</div>

CSS：

/* CSS used here will be applied after bootstrap.css */

.container {
    text-align: center;
}
.container .row {
    display: flex;
}
.container .row:nth-child(even) {
    background: gainsboro;
}
.container .content-column, .container .image-column {
   border: 1px solid grey;
}
.container .row:not(:first-child) .content-column, .container .row:not(:first-child) .image-column {
    border-top: 0px;
}
.container .content-column:not(:first-child), .container .image-column:not(:first-child) {
   border-left: 0px;
}
.image-column {
    padding: 5px;
}
.content-column {
   border: 1px solid grey;
   border-top: 0px;
  font-size: 1.3em;
}
.content-column:not(:first-child) {
   border-left: 0px;
}

结果：

查看此操作：http://www.bootply.com/1MaNWk0ybV

【讨论】：