如何呈現在移動

Question

自舉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ölfsdfsdlfökösdfösdlkfsdöfksdöflksdfösdköfksöfsdköfskdfsdfksdö ...更相似的TR的元件

在桌面屏幕中正確顯示兩列。 在移動中它也出現了兩列，但描述欄非常窄。

如何強制它出現在單欄中的移動設備：標題的第一行和描述的第二行，以便colum在縱向方向上具有完整的bolile屏幕寬度。

Bootstrap 3和jquery-ui用於ASP.NET MVC4購物車。

Answer 1

更新基於新的信息：
您現在表明改變的標記是OK的，如果表總是/只，有兩列，並應出現更多或更少的像你的示例表，然後我倒是建議切換到橫向描述列表：http://getbootstrap.com/css/#horizontal-description

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

原來的答案： 這是不可能的，而無需使用任何其他自定義樣式或重構你的HTML是完全不同的。

但是，它是相當簡單的做一些自定義的CSS。請注意，您的CSS必須在引導程序後加載，才能正常工作。

這裏有一個demo in a jsfiddle

的我都做了什麼短的版本是：

1. 添加一個新類table-responsive，這樣我可以明確創建這個行爲上只有我想這表發生。
2. 增加了一些替代方式（在媒體查詢），使表格單元格顯示爲您的要求：

修改HTML：

<table class="table table-hover table-condensed table-striped table-responsive"> 
    <!-- your table contents --> 
</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 2

我自己也遇到過類似的問題。我的解決辦法是改變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 3

您說：

號我想用引導3，儘可能，最好沒有任何其他的自定義樣式

儘管我寫我的回答也許它可以幫助別人：

您的表例如設置一個類名「敏感'

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