Как вынести два столбца в одном столбце в мобильном

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

sdofsdk sdklöfsdklö sdfklösdflök sdfkösdlökdsö sdfösdkf sdfkösdkf sdöfksdfö sdfksdölf sdfsdlfökö sdfösdlkf sdöfksdöflk sdfösdköfk söfsdköfskdf sdfksdö ... другие подобные элементы тр

В рабочем столе на экране отображается правильно в двух столбцах. В мобильном телефоне также отображаются два столбца, но колонка описания очень узкая.

Как заставить его появляться в одном столбце на мобильном телефоне: первая строка для заголовка и второй строки для описания, так что колла имеет всю ширину экрана болила в портретной ориентации.

Bootstrap 3 и jquery-ui используются в корзине покупок ASP.NET MVC4.

Answer 1

Обновление на основе новой информации:
Теперь указывают изменение разметки в порядке, и если таблица всегда/имеет только две колонки, и должна появиться более или менее, как ваш пример таблицы, то я «d рекомендовать переход на горизонтальные списки описания: http://getbootstrap.com/css/#horizontal-description

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

Оригинал Ответ: Это невозможно без использования каких-либо других пользовательских стилей или рефакторинга вашего HTML, чтобы быть совершенно иными.

Однако является довольно простым в использовании с некоторыми пользовательскими CSS. Обратите внимание, что ваш CSS должен быть загружен после Bootstrap, чтобы работать правильно.

Вот 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, так что вместо того, чтобы использовать таблицы, можно использовать DIVs что ведут себя как таблицы:

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

Вы сказали:

Нет, я хочу использовать Bootstrap-как можно больше, в идеале без любого другого пользовательского стиля

Несмотря я написать свой ответ, может быть, это поможет кому-то:

Установить имя класса для таблицы, например ' отзывчивый '

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