我们怎样才能使bootstrap行/列看起来像一个表？

时间：2016-06-29 12:41:59

标签： css twitter-bootstrap css3

由于col的填充，

My #1 try失败。

My #2 try也因为我必须做些蠢事。

这是理想的结果：

enter image description here

有人可以帮助我吗？如果可能，请避免重写引导规则。

13 个答案:

答案 0 :(得分：9)

表的基本原理 - ＆gt;行/列是，在特定行中，无论内容是什么，列都应该具有相同的高度。

您可以表格 - ＆gt;使用引导网格的行/列结构，但会出现高度相等列的问题。

因此，为此目的，即对于相等的列，您可以使用 flexbox 属性。 （它不会在ie9中工作，因此请确保其使用。）

Check this fiddle here

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

C:\Sites\workspace\sample_app1>git push
      0 [main] us 0 init_cheap: VirtualAlloc pointer is null, Win32 error 487
AllocationBase 0x0, BaseAddress 0x68570000, RegionSize 0x460000, State 0x10000
C:\RailsInstaller\Git\bin\ssh.exe: *** Couldn't reserve space for cygwin's heap, Win32 error 0

fatal: Could not read from remote repository.

Please make sure you have the correct access rights and the repository exists.

Here is the reference

答案 1 :(得分：6)

您可以使用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>

答案 2 :(得分：5)

您是否尝试过使用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

答案 3 :(得分：3)

就像之前所说的人一样，你可以使用表格标签。但是如果你仍然想使用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;来使单元格具有相同的高度。

祝你好运！

答案 4 :(得分：2)

我对您的代码进行了一些更改。但我不知道你的期望是否真的如此：

<强> 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;
}

结果： enter image description here

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

答案 5 :(得分：2)

你可以用 行显示：表格 colum display：table-cell

答案 6 :(得分：2)

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

<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>

答案 7 :(得分：2)

以下是您的问题的代码可能对您有帮助。

检查此小提琴链接JSFiddle

HTML CODE 

<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;
}

答案 8 :(得分：1)

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

答案 9 :(得分：1)

Here is the working code: Bootply link

两步流程：

  1. 为.row-table添加额外的课程（.row），并指定以下 css 属性。 

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

  2. 在我们的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;}
    3.   

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

答案 10 :(得分：1)

enter image description here

试试这个并阅读CSS区域中的评论：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>

答案 11 :(得分：1)

如何遵循以下方式：

bootply example

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

equal height columns example

答案 12 :(得分：1)

在你的第二个例子中，我改变了image-column和content-column，它正在工作..尝试这个可能对你有所帮助......

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题