我很好奇如何制作100%正确的填充。图片上的文字必须遵循蓝线。这意味着“kvalifikationsbeskrivelse”,“Indhold”和文字必须符合“Slidesfraforelæsninger”。
目前我正在猜测左边的填充:20px; ,但这不会是正确的。有没有一种聪明的方法可以在CSS中做到这一点?
答案 0 :(得分:1)
你搞砸了你的标记。
<section class="portfolio">
)中找到: <div class="col-md-12 col-sm-12 col-xs-12">
<h4 class="h4 courses">Slides Fra Forelæsninger</h4>
<hr>
</div>
并用<div class="row">
包裹它,如下所示:
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h4 class="h4 courses">Slides Fra Forelæsninger</h4>
<hr>
</div>
</div>
<section class="portfolio">
): <section class="portfolio">
<div class="container">
<div class="row">...</div>
<div class="row">...</div>
<div class="row">...</div>
</div>
</section>
将其更改为:
<div class="row">...</div>
<div class="row">...</div>
<div class="row">...</div>
所以基本上只需删除包装<section>
和<div>
标记。
使用bootstrap的经验法则是遵循文档的结构:
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">...</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">...</div>
</div>
...
</div>
标记失败的原因是您反复调用<section class="portfolio">
和<div class="container">
,实际上应该只调用一次。
加强理论只是结帐Bootstrap Grid部分
您可以获取代码并替换标记:
<!-- begin portfolio section -->
<section class="portfolio">
PASTE THE CODE
</section>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<!-- Kursus beskrivelse -->
<h4>Kvalifikationsbeskrivelse</h4>
<p>
Deltagerne vil efter kurset have et grundlag for at forstå den historiske udvikling i forhold til design som en skabende
praksis og dets samvirken med den samfundsmæssige udvikling. Perspektivere forskellige design tilgange, og deraf følgende
designteorier typisk båret af idealer og politiske perspektiver. Kursets arbejdsform vil også træne deltagernes evne
til at formidle og kommunikere faglige problemstillinger. Deltagerne skal ved afslutningen af kurset kunne:
</p>
<ul>
<li class="courses">Identificere forskellige designretninger og teorier i hverdags produkter og services.</li>
<li class="courses">Reflektere over forskellige design teoriers styrker og svagheder.</li>
<li class="courses">Anvende data, illustrationer og interaktive kvaliteter på tværs af programpakker til digital præsentation og illustration
af et pervasive computing artefakt eller miljø.</li>
</ul>
<h4>Indhold</h4>
<p>
På trods af at de forskellige designperspektiver havde deres storhed på bestemte tidspunkter er de alle at finde i mere eller
mindre rendyrket grad i de produkter vi omgiver os med til hverdag. Kurset vil introducere de fremherskende 'designskoler'
(e.g. Bauhaus, Ulm, Cranbrook) og deres tænkning op gennem det 20 århundrede.
</p>
</div>
</div>
<!-- Forelæsninger slides -->
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h4 class="h4 courses">Slides Fra Forelæsninger</h4>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="/courses/AU-pensum/designteori-og-historie/forelaesninger-slides/2art_nov2.pdf" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/courses/au/designteori-og-historie/forelaesninger-slides/frihedskamp-og-fremtidsforelskelse.jpg" alt="Designteori">
</div>
</a>
<div class="block-data">
<h3>
Frihedskamp Og Fremtidsforelskelse
</h3>
</div>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image1.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
Red Pepper on Wood
</h3>
</div>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image3.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
People on Overlook
</h3>
</div>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image4.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
Camera Vintage Style
</h3>
</div>
</article>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image5.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
Red & White Tire Stack
</h3>
</div>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image6.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
Appointment with Client
</h3>
</div>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image1.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
Red Pepper on Wood
</h3>
</div>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image3.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
People on Overlook
</h3>
</div>
</article>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image4.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
Camera Vintage Style
</h3>
</div>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image2.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
Football in Grass
</h3>
</div>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image5.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
Red & White Tire Stack
</h3>
</div>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image5.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
Red & White Tire Stack
</h3>
</div>
</article>
</div>
</div>
<!-- Afleveringer -->
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h4 class="h4 courses">Afleveringer Uddrag</h4>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image1.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
Red Pepper on Wood
</h3>
</div>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/courses/au/designteori-og-historie/forelaesninger-slides/frihedskamp-og-fremtidsforelskelse.jpg" alt="Designteori">
</div>
</a>
<div class="block-data">
<h3>
Frihedskamp Og Fremtidsforelskelse
</h3>
</div>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image3.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
People on Overlook
</h3>
</div>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image4.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
Camera Vintage Style
</h3>
</div>
</article>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image5.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
Red & White Tire Stack
</h3>
</div>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image6.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
Appointment with Client
</h3>
</div>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image1.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
Red Pepper on Wood
</h3>
</div>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image3.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
People on Overlook
</h3>
</div>
</article>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image4.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
Camera Vintage Style
</h3>
</div>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image2.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
Football in Grass
</h3>
</div>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image5.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
Red & White Tire Stack
</h3>
</div>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image5.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
Red & White Tire Stack
</h3>
</div>
</article>
</div>
</div>
<!-- Tekniske Øvelser -->
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h4 class="h4 courses">Tekniske Øvelser</h4>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image1.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
Red Pepper on Wood
</h3>
</div>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/courses/au/designteori-og-historie/forelaesninger-slides/frihedskamp-og-fremtidsforelskelse.jpg" alt="Designteori">
</div>
</a>
<div class="block-data">
<h3>
Frihedskamp Og Fremtidsforelskelse
</h3>
</div>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image3.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
People on Overlook
</h3>
</div>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image4.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
Camera Vintage Style
</h3>
</div>
</article>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image5.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
Red & White Tire Stack
</h3>
</div>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image6.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
Appointment with Client
</h3>
</div>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image1.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
Red Pepper on Wood
</h3>
</div>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image3.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
People on Overlook
</h3>
</div>
</article>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image4.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
Camera Vintage Style
</h3>
</div>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image2.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
Football in Grass
</h3>
</div>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image5.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
Red & White Tire Stack
</h3>
</div>
</article>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="block-image">
<div class="overlay"></div>
<img src="/images/thumbs/image5.jpg" alt="portfolio item">
</div>
</a>
<div class="block-data">
<h3>
Red & White Tire Stack
</h3>
</div>
</article>
</div>
</div>
</div>