Стол внутри загрузочной сетки выходит за решетку

Это может быть трудно объяснить.Стол внутри загрузочной сетки выходит за решетку

См plunker: http://plnkr.co/edit/kSMeYCHjVuXyvy9Uvkdg?p=preview

Это издеваться приложение, которое я работаю над.

В col-xs-2 у меня есть боковая панель/меню. В col-xs-10, у меня есть таблица, которая отображает пользователя для данных. (Btw, слово Honorificabilitudinitatibus - это какое-то длинное слово, которое я получил из Википедии.

Проблема в том, что из-за того, что в моей таблице слишком много контента или слова слишком длинны, таблица выходит за пределы div row, который я выделил с красной каймой.

Я хотел бы все, чтобы быть в пределах красной границы (или красной каймы, чтобы расти, как таблица становится больше). Как это сделать в загрузчике?

Благодарности

источник

2015-01-12 Rhs

из [сайт Bootstrap в] (http://getbootstrap.com/css/#tables-responsive): «Создать отзывчивым таблицы, обертывая любой '.table' в' .table-responsive', чтобы заставить их прокручивать по горизонтали на небольших устройствах (до 768 пикселей). При просмотре на чем-то большем, чем 768 пикселей, вы не увидите различий в этих таблицах ». ** edit: ** Основная проблема заключается в том, что таблицы плохо реагируют на меньшие размеры/ширину экрана. Я не уверен, что таблица сделает то, что вам нужно. Можете ли вы использовать рефакторинг вместо 'display: table'? –

Как предлагает @Joseph Marikle, вы должны посмотреть на функцию гибких таблиц, предоставляемую с помощью самозагрузки. Скорее всего, они разработали множество проблем, связанных с этим.

Однако для достижения этой цели вы можете использовать свойство CSS table-layout и ширину 100%.

table { 
    width: 100%; 
    table-layout: fixed; 
}

источник

2015-01-12 22:16:35 biggles

Проблема с учетом таблицы - это то, что она отображает полосу прокрутки в самом низу, что делает приложение не удобным для пользователя. В идеале я хочу, чтобы вся страница прокручивалась, а не только div col-xs-10. – Rhs

бутстрапом row предназначен для помещается внутрь container в результате он содержит отрицательные поля, которые вызывают ваш стол, чтобы выходить за рамки.

Таким образом, вы должны поместить row DIV в .container-fluid ...

http://bootply.com/PTS4QZHgl8

источник

2015-01-14 16:04:01 ZimSystem

Я не думаю, что это правильно. Если вы поместите границу на col-xs-10 и сжимаете экран, вы увидите, что таблица расширяет проход строки. см. fork: http://www.bootply.com/ObiTuv0gH4 – Rhs

Да, вот почему вы должны поместить его в 'table-responsive' div – ZimSystem

Стол внутри загрузочной сетки выходит за решетку

ответ

Смежные вопросы