Вопросы Теги

Bootstrap 4 делает контейнер размером с детей

Вместо использования getElementsByClassName() , который возвращает live HTMLCollection, который изменится с изменением className s, вы можете использовать querySelectorAll() , который возвращает неживой NodeList, который не изменится.

querySelectorAll() имеет лучшую поддержку IE, чем getElementsByClassName() (IE8 + против IE9 +). Он также намного более гибкий, поскольку он поддерживает селектор CSS (CSS2 для IE8 + и CSS3 для IE9 +).

Однако querySelectorAll() является медленнее , чем getElementsByClassName(). Помните об этом если вы обрабатываете тысячи элементов DOM.

Snippet 

var blockSet = document.querySelectorAll(".block-default");
var blockSetLength = blockSet.length;

blockSet[0].className = "block-selected";
blockSet[1].className = "block-selected";
blockSet[2].className = "block-selected";
blockSet[3].className = "block-selected";
blockSet[4].className = "block-selected";
blockSet[5].className = "block-selected";
blockSet[6].className = "block-selected";
blockSet[7].className = "block-selected";
.block-default {
  width: 100px;
  height: 50px;
  background-color: green;
  border: 1px solid red;
  padding: 10px;
}
.block-selected {
  width: 100px;
  height: 50px;
  background-color: blue;
  border: 1px solid white;
  padding: 10px;
}
BLOCK1


BLOCK2


BLOCK3


BLOCK4


BLOCK5


BLOCK6


BLOCK7


BLOCK8

0
задан andre_ss6 13 July 2018 в 20:37
поделиться

2 ответа

Если я правильно вас понимаю, вы хотите поместить контейнер таблицы горизонтально, не так ли? просто установите значение pivot-ui на 100% следующим образом: 

.pivot-ui {
  width: 100%;
  background-color: red;
}
0
ответ дан Irandoust 17 August 2018 в 12:11
поделиться
  • 1
    Неа. Я задал ширину в скрипке 1200px целенаправленно, чтобы имитировать, когда сводная таблица становится слишком широкой. Пользователь может удалить или добавить столбцы из сводной таблицы по своему усмотрению, поэтому я не могу контролировать, насколько это будет. Я пытаюсь сделать еще одну скрипку прямо сейчас, используя фактическую библиотеку сводной таблицы. Я обновлю вопрос, когда он будет готов. – andre_ss6 13 July 2018 в 20:03
  • 2
    Хорошо понял. Вы пробовали & quot; overflow-x: scroll & quot; на родителя? Я пробовал, и это сработало. – Irandoust 13 July 2018 в 20:24
  • 3
    Да, однако, как я сказал в вопросе, таблица занимает секунды, чтобы отображать при прокрутке с overflow, установленным на родительском. – andre_ss6 13 July 2018 в 20:33
  • 4
    Я не думаю, что вам нужно настроить ширину на 1200 пикселей для имитации. Удалите эту строку в своем css. Ваша таблица будет настроена на ширину вашего порта представления, так как вы определили <div class="col-sm-12">. Теперь, если вы хотите заставить таблицу такого размера, тогда у вас не будет отзывчивого макета или, по крайней мере, вы не сможете использовать определения boostratp. – kfrajer 13 July 2018 в 20:38
  • 5
    Хорошо, я обновил скрипку, чтобы сделать ее более ясной. – andre_ss6 13 July 2018 в 20:39

Можете ли вы попробовать это, если я понял ваш qn 

.pivot-ui {
  width:1200px;
  background-color:red;
  overflow: auto;
}
0
ответ дан user9964622 17 August 2018 в 12:11
поделиться
  • 1
    Да, я попытался установить overflow:auto, overflow-x:scroll почти на всех родителей (сводный-ui div, его col parent, его родительский row и его родительский container-fluid), однако, как я сказал в вопросе, таблица занимает секунды для рендеринга при прокрутке с переполнением, установленным на родительском. – andre_ss6 13 July 2018 в 20:34
  • 2
    Я не вижу проблемы в вашем новом jsfiddle – kfrajer 13 July 2018 в 20:43
  • 3
    Если вы прокрутите список, вы увидите, что таблица более широкая, чем контейнер начальной загрузки. – andre_ss6 13 July 2018 в 20:49
  • 4
    можете ли вы показать его на принт-экране через краску, в чем проблема?, глядя на вас, код запутан, вам будет гораздо лучше увидеть, что вам нужно изменить – user9964622 13 July 2018 в 21:04