Блог

Главная - Вопросы по программированию - Раскрытие границ в сетке

Раскрытие границ в сетке

#asp.net #twitter-bootstrap #asp.net-core #asp.net-mvc-4 #grid

Вопрос:

В настоящее время я ищу объяснение следующему явлению:

  1. ASP.NET 
     lt;div class="container-fluid"gt;  lt;div class="row"gt;  lt;div class="col-md-4" style="font-size:16px;gt;  one column  lt;/divgt;  lt;div class="col-md-4" style="font-size:16px;gt;  two column  lt;/divgt;  lt;div class="col-md-4" style="font-size:16px;gt;  three column  lt;/divgt;  lt;/divgt; lt;divgt;

Основываясь на приведенном выше коде, можно было видеть каждый столбец, разделенный вертикальной линией.

  1. ASP.NET (Core) MVC

После перехода на MVC платформу аналогичный код не отображал вертикальную линию, использующую разделитель столбцов.

В качестве обходного пути я добавил a CSS и, слегка изменив код , добавил:

 /* add column separator */ #divider .border { border-right: 1px solid #ddd; }   lt;div class="container-fluid" id = "divider" gt;  lt;div class="row"gt;  lt;div class="col-md-4 border" style="font-size:16px;gt;  one column    lt;pgt; testlt;/pgt;  lt;/divgt;  lt;div class="col-md-4 border" style="font-size:16px;gt;  two column  lt;pgt; test2lt;/pgt;  lt;/divgt;  lt;div class="col-md-4 border" style="font-size:16px;gt;  three column    lt;/divgt;  lt;/divgt;  lt;/divgt;

Учитывая отсутствие улучшений и после онлайн-поиска, мне, следовательно, любопытно узнать любую причину.

Заранее спасибо.

Лучшие.

Комментарии:

1. В чем именно заключается проблема? Есть вертикальные линии или нет? И style="font-size:16px; то отсутствует закрытие "

2. @VDWWD: Спасибо за ваши отзывы. Изначально их не было, и я опубликовал собственный ответ, который не идеален, как описано. Любопытно посмотреть, существуют ли лучшие альтернативы.

Ответ №1:

Приведенная ниже корректировка в конечном итоге сработала, хотя и не идеально, так height как количество вертикальных линий пропорционально количеству rows используемых в каждой column из них .

Н.Б.: Таким образом, я могу использовать, как обходной путь, пустые строки, чтобы гарантировать определенное symmetry , оставаясь открытым для более надежных предложений.

CSS

 .border-right { border-right: 1px solid #ddd; }

ASP.NET (Ядро) MVC

 lt;div class="container" gt;  lt;div class="row"gt;  lt;div class="col-md-4 border-right" style="font-size:16px;gt;  one column    lt;pgt; testlt;/pgt;  lt;/divgt;  lt;div class="col-md-4 border-right" style="font-size:16px;gt;  two column  lt;pgt; test2lt;/pgt;  lt;/divgt;  lt;div class="col-md-4" style="font-size:16px;gt;  three column    lt;/divgt; lt;/divgt;
Метки: