0
さて、私は写真のように見えるウェブページを作る必要があります。上記のサイトは今は本当に面白くないですが、それは画像のように見える必要があるタイルについてです。しかし、私はそれを行う方法を知らないし、いくつかの助けを使うことができます。私はBootstrap 3.0を使用しており、それを使用しなければなりません。ブートストラップ3グリッドプロジェクト
あなたはそれが完璧に見えないことがわかります、そして、私が画面を小さくすると、それは完全に台無しです。私が求めているのは、これをどうやってやるべきかについての助けです。
この画像は、どのように見えるかを示しています。 
この画像は、今のところどのように見えるかを示しています。 
コードをスニペットで表示します。私が意味する、私はあなたが別のものにこの意志の混乱を1 COLに画像やテキストを入れていないことをお勧めすべての
.background {
background-color: #24a5e8;
margin: 0 auto;
width: 100%;
}
.text {
color: white;
margin-bottom: 5%;
margin-left: 4%;
}
#h2 {
margin-left: 1em;
}
#hr {
border-color: white;
margin-left: 2em;
width: 17em;
}
#span{
margin-left: 3em;
}
.tegels {
font-family: Tw Cen MT;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bootstrap-iso">
<div class="container-fluid"> <!-- container-fluid -->
<div class="row"> <!-- row1 -->
<div class="background"> <!-- background -->
<div class="row"> <!-- row2 -->
<div class="col-lg-5 col-lg-offset-4 col-md-8 col-md-offset-3 col-xs-offset-1">
<div class="text">
<h2 id="h2">ONZE SERVICE</h2>
<hr id="hr">
<span>Voor klein en middenbedrijf zijn wij het aangewezen</span> <br>
<span id="span">netwerk om online te ondernemen</span>
</div>
</div>
</div> <!-- row2 -->
</div> <!-- /background -->
</div> <!-- /row1 -->
</div> <!-- /container-fluid -->
<!--Alle tegeltjes-->
<div class="container"> <!-- container -->
<div class="tegels"> <!-- tegels -->
<div class="row"> <!-- row -->
<div class="col-md-1 col-md-offset-1">
<img src="http://via.placeholder.com/92x91"></a>
</div>
<div class="col-md-2 col-xs-9 col-sm-4" style="margin-bottom: 2em; background-color: #e3e9f2;">
<p style="font-size:20px;"><b> PRODUCTEN</b></p>
<p style="font-size:15px;">Uw producten en diensten direct online delen in ons netwerk.</p>
</div>
<div class="col-md-1">
<img src="http://via.placeholder.com/92x21"></a>
</div>
<div class="col-md-2 col-xs-9 col-sm-4" style="background-color: #e3e9f2;">
<p style="font-size:20px;"><b>AANBIEDINGEN</b></p>
<p style="font-size:15px;">Al uw aanbiedingen in een duidelijk overzicht.</p>
</div>
<div class="col-md-1">
<img src="http://via.placeholder.com/92x21"></a>
</div>
<div class="col-md-2 col-xs-9 col-sm-4" style="background-color: #e3e9f2;">
<div id="lokaal">
<p style="font-size:20px;"><b>LOKAAL</b></p>
<p style="font-size:15px;">Regionale kracht, naamsbekendheid en betere vindbaarheid.</p>
</div>
</div>
</div> <!-- /row -->
<div class="row"> <!-- row -->
<div class="col-md-1 col-md-offset-1">
<img src="http://via.placeholder.com/92x21"></a>
</div>
<div class="col-md-2 col-xs-9 col-sm-3" style="background-color: #e3e9f2;">
<div id="aanbod">
<p style="font-size:20px;"><b> AANBOD OP MAAT</b></p>
<p style="font-size:15px;">Welke klant past er bij u? Hulp bij het sturen in de vraag en aanbod.</p>
</div>
</div>
<div class="col-md-1">
<img src="http://via.placeholder.com/92x21"></a>
<div class="col-md-2 col-xs-9 col-sm-3" style="background-color: #e3e9f2;">
<div id="netwerken">
<p style="font-size:20px;"><b> NETWERKEN</b></p>
<p style="font-size:15px;">Socialmedia netwerken koppelen aan uw account. Delen en volgen gaat bijna vanzelf.</p>
</div>
</div>
<div class="col-md-1">
<img src="http://via.placeholder.com/92x21"></a>
</div>
<div class="col-md-2 col-xs-9 col-sm-3" style="background-color: #e3e9f2;">
<div id="tools">
<p style="font-size:20px;"><b> TOOLS</b></p>
<p style="font-size:15px;">Gebruiksgemak, eenvoudig, overzichtelijke software. Responsive HTML5. Kwaliteitsnorms.</p>
</div>
</div>
</div> <!-- /row -->
</div> <!-- /tegels -->
</div> <!-- /container -->
</div> <!-- /bootstrap -->
更新ブートストラップ含めるためのスニペット... – Dekel
は、あなたのdiv要素にパディングを追加します。 – Raimonds
詳細な情報や作業の完全な例がなければ何もできません – Pogrindis