Bootstrap 3 grid project

好吧，我必須製作一張看起來像照片的網頁。上面的網站現在不是很有趣，但它是關於需要看起來像圖片的瓷磚。但我不知道該怎麼做，並可以使用一些幫助。我使用的是Bootstrap 3.0，必須使用它。Bootstrap 3 grid project

你看到它看起來不太完美，當我縮小屏幕時，它完全搞砸了。我所要求的是我應該如何做到這一點的一些幫助。

此圖顯示它應該是什麼樣子。

此圖顯示了它現在的樣子。

我的代碼片段。

.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 -->

來源

2017-09-15 Nick van Bruggen

更新片段以包括引導... – Dekel

添加填充到您的divs。 – Raimonds

如果沒有更多信息或工作的完整示例，我們無法做任何事 – Pogrindis

首先，我建議你把圖片和文字到一個山坳，而不是單獨的人這會搞亂我的意思是： 更改此

<div class="col-md-1"> 
     <img src="img/overimages/Netwerk.png"> 
    </div> 
    <div class="col-md-2 col-xs-9 col-sm-3" style="background-color: #e3e9f2;"> 
    ... 
    </div>

像這樣的東西

<div class ="col-md-4"> 
    <div class="row"> 
     <div class="col-xs-4"> 
     **IMG here** 
     </div> 
     <div class="col-xs-8"> 
     **Text here..** 
     </div> 
    </div> 
</div>

我在該div中使用xs，因爲它們應該是所有設備的相同比例。

來源

2017-09-15 12:50:58 1011sophie

我做了它看起來更好，但在圖像和文本之間有太多的空間。他們需要彼此相鄰 –

或使用媒體對象並對其進行設計。 https://getbootstrap.com/docs/3.3/components/#media – Leeish

.background { 
 
    background-color: #24A5E8 !important; 
 
    color: #fff; 
 
} 
 

 
.hr { 
 
    color: #fff; 
 
    margin: 0 auto; 
 
    width: 30%; 
 
} 
 

 
.background .text h1, 
 
p { 
 
    text-align: center; 
 
} 
 

 
.background .text p { 
 
    padding: 1%; 
 
    margin-top: 1%; 
 
    line-height: 1.4; 
 
} 
 

 
.tegels { 
 
    font-family: Tw Cen MT; 
 
} 
 

 
.row { 
 
    margin-top: 1%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<body> 
 
    <div class="container-fluid"> 
 
    <div class="background"> 
 
     <div class="row"> 
 
     <div class="col-md-12"> 
 
      <div class="text"> 
 
      <h1>ONZE SERVICE</h1> 
 
      <hr class="hr"> 
 
      <p>Voor klein en middenbedrijf zijn wij het aangewezen<br> netwerk om online te ondernemen</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="container"> 
 
    <div class="tegels"> 
 

 
     <div class="row"> 
 
     <div class="col-md-1 col-md-offset-1"> 
 
      <a href=""><img src="http://via.placeholder.com/81x81"></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 col-md-offset-1"> 
 
      <a href=""><img src="http://via.placeholder.com/81x81"></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 col-md-offset-1"> 
 
      <a href=""><img src="http://via.placeholder.com/81x81"></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> 
 
     <div class="row"> 
 

 
     <div class="col-md-1 col-md-offset-1"> 
 
      <a href=""><img src="http://via.placeholder.com/81x81"></a> 
 
     </div> 
 
     <div class="col-md-2 col-xs-9 col-sm-4" 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 col-md-offset-1"> 
 
      <a href=""><img src="http://via.placeholder.com/81x81"></a> 
 
     </div> 
 
     <div class="col-md-2 col-xs-9 col-sm-4" style="background-color: #e3e9f2;"> 
 
      <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 class="col-md-1 col-md-offset-1"> 
 
      <a href=""><img src="http://via.placeholder.com/81x81"></a> 
 
     </div> 
 
     <div class="col-md-2 col-xs-9 col-sm-4" 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> 
 
    </div> 
 
    </div> 
 
</body>

以上是表示如果全屏模式觀看

建議

。堅持基本期望的結果的代碼。

2.使用良好的代碼編輯器等原子，Visual Studio代碼等

3.清除有關佈局和代碼相應。

4.瞭解使用開發人員工具。你可以設計你的網頁，並可以使用它來做更多的事情。

最佳運氣

來源

2017-09-15 15:30:23

Bootstrap 3 grid project

回答

相關問題