Расчет ширины в процентах минус маржа с LESS CSS

Question

Я использую сетку Twitter Bootstrap в своем приложении CMS.

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

<div class="span9 row"> 
    <div class="span5">span5</div> 
    <div class="span4">span4</div> 
</div> 

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

Таким образом, классы span5 и span4 будут переопределены. Это будет по существу вести себя как строка таблицы, но я думаю, что взломанно сделать строку display: table-row, и это, вероятно, разрушит чувствительные функции сетки TwBootstrap.

То, что я хотел бы избежать, чтобы определить каждую комбинацию ширины, как например:

<div class="span9 row shared child-count-2"> 
    <div class="span5">span5</div> 
    <div class="span4">span4</div> 
</div> 

И в CSS:

.row.span9.shared.child-count-2 > div { 
    width: 340px; 
} 

Поскольку я уже использую МЕНЬШЕ для CSS, я подумал, что может быть удобный расчет, который может сделать эту работу.

Проблема в том, что указание ширины 50% не учитывает 20px от margin-left. Поэтому мне нужно взять ширину строки, минус 20 пикселей для каждого столбца. А затем разделите оставшуюся ширину на количество столбцов.

Кроме того, я хотел бы избежать использования JavaScript. Мне не нравится рендеринг 99% представления, а затем выполнение настроек скрипта. Если выполнение скрипта получает небольшую задержку, пользователи будут видеть, что макет мерцает. Нехорошо.

Итак, есть ли способ сделать это от LESS/CSS?

Answer 1

Вы можете достичь этого, используя LESS. С LESS вы можете использовать оценку выражений JavaScript оборачивать их в бэк-тики:

@var: `"hello".toUpperCase() + '!'`; 

Таким образом, вы также можете использовать такие вещи, как document.getElementById('myId').width, чтобы получить ширину элемента и так далее .. Проверьте здесь lesscss.org и перейти к " JavaScript Evaluation ".

Если вам нужна дополнительная помощь, просто спросите! :)