Question

我没有使用响应表，而是设法通过bootstrap获得3个colums来显示数据，唯一的问题是最大高度不起作用，所以all单元格将是相同的高度（所以url将在完全相同的行上）

<!DOCTYPE html>
<html lang="en" class="no-js">
  <head>

    <link rel="stylesheet" href="css/bootstrap.min.css">

  </head>
  <body>

  <div class="container">
    <!-- first item-->
    <div class="col-md-4 col-sm-4 text-center">
      <div class="overflow-hidden"><img src="http://placehold.it/350x150" alt=""></div>
      <div class="text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised </div>
      <div class="text-center"><br>www.url.de</div>
    </div>
    <!-- second item-->
    <div class="col-md-4 col-sm-4 text-center">
      <div class="overflow-hidden"><img src="http://placehold.it/350x150" alt=""></div>
      <div class="text-center">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div>
      <div class="text-center"><br>www.url.de</div>
    </div>
    <!-- third item-->
    <div class="col-md-4 col-sm-4 text-center">
      <div class="overflow-hidden"><img src="http://placehold.it/350x150" alt=""></div>
      <div class="text-center">he standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.</div>
      <div class="text-center"><br>www.url.de</div>
    </div>
  </div>

</body>
</html>

Answer 1

这是使用bootstrap grid system时预期的行为，行在较小的屏幕中崩溃。如果你想要表格数据，你应该使用表，如果表需要响应，你应该wrap them in a div with the .table-responsive class

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

这将使表格在较小的屏幕中水平滚动

Answer 2

尝试使用“col-xs-6”代替“col-md-x”

  <div class="row">
    <div class="col-xs-6">
      1.1
    </div>
    <div class="col-xs-6">
      2
    </div>
  </div>

https://jsfiddle.net/06wmtdzb/

Answer 3

它有点好用但是如果我调整窗口大小它就不会保持正确的顺序...让我发疯...

<!DOCTYPE html>
<html lang="en" class="no-js">
  <head>
    <link rel="stylesheet" href="css/bootstrap.min.css">
<style type="text/css">


    /*
Generic Styling, for Desktops/Laptops
*/
table {
  width: 100%;
  border-collapse: collapse;
}

td, th {
  padding: 6px;
  border: none;
  text-align: left;
}
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr { border: none; }

    td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: none;
        position: relative;
        padding-left: 50%;
    }

    td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    border: none;
    }


}
</style>

  </head>
  <body>
    <div class="table-responsive">
      <table>
        <tbody>
        <tr>
            <td>1</td>
            <td>2 </td>
        </tr>
        <tr>
            <td>this should</td>
            <td>and this </td>
        </tr>
        <tr>
            <td>be span 1</td>
            <td>should be span 2</td>
        </tr>
        </tbody>
    </table>
  </div>

</body>
</html>

https://jsfiddle.net/2gwsyc96/

Bootstrap响应行，单元格高度相同

3 个答案: