1. 首頁
  2. 問答
  3. Bootstrap網格系統

Bootstrap網格系統

2014-03-27 154 views
-1

我有一個關於引導程序中的容器類的問題。 我用col-md-4網格系統爲文章頭創建了主題（在下圖中）。Bootstrap網格系統

圖片：http://imgim.com/boot1.png

但我想給每個額外類格「文章的頭」的背景色。 後來我得到這個（下圖）

圖片：http://imgim.com/boot2.png

容器類都有自己的填充（從15像素左右）。 在這種情況下，當我應用背景顏色時，div顏色溢出外部。

bootstrap是製作響應式網站的好方法，但在這種情況下， 我遇到了主題設計方面的問題。

任何想法解決這個問題？

來源

2014-03-27 user3469764

+0

您無法找到r圖像。 – Jieter

回答

3

padding is the space between the content and the border

看到通過你的圖像文件，你可能已經編寫這樣的事情

<div class="container"> <div class="row"> <div class="col-sm-3 clrclass">some content</div> <div class="col-sm-3 clrclass">some content</div> <div class="col-sm-3 clrclass">some content</div> </div> </div>

改用DIV類COL-SM-3內部這樣

<div class="row"> <div class="col-sm-3"><div class="clrclass">some content</div></div> <div class="col-sm-3"><div class="clrclass">some content</div></div> <div class="col-sm-3"><div class="clrclass">some content</div></div> </div>

來源

2014-04-21 19:41:48 prashanth

1 
<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <title>Bootstrap 101 Template</title> 
    <!-- Bootstrap --> 
     <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
     <style> 
     </style> 
    </head> 
    <body> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-lg-6 col-md-6 col-sm-6 hidden-xs" style="padding-left:0px; padding-right:0px"> 
       <img src="http://localhost:1038/Images/login.jpg" class="img-responsive" alt="Login.jpg" width="100%"/> 
      </div> 

       <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
         <div class="row"> 
          <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-lg-offset-10 col-md-offset-10 col-sm-offset-9 col-xs-offset-4"> 
           <img src="http://localhost:1038/Images/sahil.jpg" class="img-responsive" alt="Sahil.jpg" width="100%"/> 

          </div> 
         </div> 
         <div class="row"> 
           <div class="col-lg-pull-5 col-md-pull-5 col-sm-pull-5 col-xs-4 col-xs-offset-4 col" style="background-color:red;"> 
           <form name="form1" method="post" class="form-group"> 
           <div class="label">Username</div> 
           <input type="email" class="form-control" /> 
           <div class="label">Password</div> 
           <input type="password" class="form-control" /> 
           <br /> 
           <input type="submit" value="Login" class="form-control btn-primary" /> 
           </form> 
          </div> 
        </div>      
      </div> 
     </div> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
     <script src="bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script> 
    </body> 
</html>

來源

2017-07-03 07:01:38

相關問題

 相關問題