Question

Bootstrap 3表定义为

<style>
/* Override bootstrp style to make description to wrap info multiple rows in mobile */
.details-propertyvalue {
    white-space:normal !important;
}
</style>

<table class="table table-hover table-condensed table-striped">
                <tbody><tr>
                    <td>
                        Product information
                    </td>
                    <td class="details-propertyvalue">

sdofsdksdklöfsdklösdfklösdflöksdfkösdlökdsösdfösdkfsdfkösdkfsdöfksdfö sdfksdölfdsfsdlfökösdfösdlkfsdöfksdöflksdfösdköfksöfsdköfskdfsdfksdö ...更多类似的tr元素

在桌面屏幕中正确显示在两列中。在移动设备中它也显示为两列，但描述列非常窄。

如何强制它出现在移动设备的单列中：标题的第一行和描述的第二行，以便colum在纵向方向上具有整个bolile屏幕宽度。

Bootstrap 3和jquery-ui用于ASP.NET MVC4购物车。

Answer 1

我自己也遇到过类似的问题。我的解决方案是更改HTML的结构，以便您使用表现的DIV而不是使用表格，而不是使用表格。

<强> HTML

<div class="table table-hover table-condensed table-striped">
  <div class="table-row">
    <div class="table-cell">
      Product information
    </div>
    <div class="table-cell">
      Rafineerimata Demerara suhkur on ideaalne täiendus kohvile. Demerara rikkalik aroom ja krõmpsuv tekstuur annab küpsistele ja kookidele eriti hea maitse. Toodet võib raputada pudrule või puuviljadele. Rafineerimata Demerara suhkur on minimaalselt töödeldud ning suhkru valmistamisel on tootesse lukustatud looduslikult suhkruroos leiduv melas
    </div>
  </div>
</div>

<强> CSS

.table {
  display: table;
}

.table-row {
    display: table-row;
}

.table-cell {
  display: table-cell;
}

然后，您可以在移动设备上将其全部更改为display: block：

@media screen and (max-width: 600px) {
  .table, .table-row, .table-cell {
    display: block;
  }
}

这将允许您在移动设备上将它们放在彼此之上。

我创造了一个演示这个here的小提琴。

希望这有帮助！：）

Answer 2

根据新信息进行更新：
您现在指示更改标记是正常的，如果表总是/只有两列，并且应该像示例表一样或多或少，那么我建议切换到水平描述列表：http://getbootstrap.com/css/#horizontal-description

<dl class="dl-horizontal">
    <dt>...</dt>
    <dd>...</dd>
</dl>

原始答案： 如果不使用任何其他自定义样式或重构HTML完全不同，则无法做到这一点。

但是，使用某些自定义CSS 相当简单。请注意，必须在Bootstrap 之后加载才能正常工作。

这是demo in a jsfiddle

我所做的简短版本是：

添加一个新类table-responsive，这样我就可以仅在我希望发生的表上专门创建此行为。

添加了一些覆盖样式（在媒体查询中），以使表格单元格显示为您的请求：

修改HTML：

<table class="table table-hover table-condensed table-striped table-responsive">  </table>

其他覆盖CSS：

/* adjust the 768px below to your desired width */ @media only screen and (max-width: 768px) { table.table-responsive tr { display: block; } table.table-responsive tr td { display: block; } }

Answer 3

你说：

没有。我想尽可能多地使用Bootstrap 3，理想情况下没有任何其他自定义样式

尽管我写了我的答案，但也许有人帮助：

为您的表格设置一个类名，例如'responsive'

table.responsive{
  width: 100%;
   }
table.responsive tr { 
   display: flex;
   display: -webkit-flex;
   flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   width:100%;
}
table.responsive td {
   width: 50%; //Or how much you want

   }
 @media screen and (max-width:480px) {
   table.responsive td{
      width:100%;
     }
 }

如何在移动设备中的单列中呈现两列

3 个答案: