bootstrap列和填充不工作

我是新的bootstrap，我想有一個特定的組織我的看法，你可以看到它的形象，但問題是我不能設法填補我的列之間填充。bootstrap列和填充不工作

  <div class="container"> 

       <div class="row"> 

        <div class="col-sm-3" style='border-radius: 5px;border: 2px solid green;'> 

        <div class="row"> 
         <div class="col-sm-12" style='border-radius: 5px;background-color:red;height:70px;'></div> 
         <div class="col-sm-12" style='border-radius: 5px;background-color:red;height:140px;'></div> 
         <div class="col-sm-12" style='border-radius: 5px;background-color:red;height:140px;'></div> 
         <div class="col-sm-12" style='border-radius: 5px;background-color:red;height:140px;'></div>        

        </div></div>  

        <div class="col-sm-9" style='border-radius: 5px;border: 2px solid red;'> 
         <div class="row"> 
          <div class="col-sm-4 " style='border-radius: 5px;background-color:red;height:220px;'></div> 
          <div class="col-sm-4" style='border-radius: 5px;background-color:red;height:220px;'></div> 
          <div class="col-sm-4" style='border-radius: 5px;background-color:red;height:220px;'></div>   

        </div> </div> 

       </div> 


      </div>

這裏是我想要的和我用這段代碼得到的。

請幫我與:) 感謝

來源

2016-05-07 Nedal Jedidi

你不會收到任何答案的地方沒有改變。你沒有足夠的研究問一個問題。 –

試試這個代碼，看看它是否足夠

<style> 
     .inner { 
      box-sizing: border-box; 
      padding: 1em; 
     } 

     .horcols-4.col-sm-3 { 
      margin: 1.5em; 
     } 

    </style> 
</head> 

<body> 

    <div class="container"> 

     <div class="outer row"> 

      <div class="col-sm-3" style='border-radius: 5px;border: 2px solid green;'> 

       <div class="row"> 
        <div class="col-sm-12" style='border-radius: 5px;background-color:red;height:70px;'></div> 
        <div class="col-sm-12" style='border-radius: 5px;background-color:red;height:140px;'></div> 
        <div class="col-sm-12" style='border-radius: 5px;background-color:red;height:140px;'></div> 
        <div class="col-sm-12" style='border-radius: 5px;background-color:red;height:140px;'></div> 

       </div> 
      </div> 

      <div class="col-sm-9" style='border-radius: 5px;border: 2px solid red;'> 
       <div class="inner row"> 
        <div class="horcols-4 col-sm-3 " style='border-radius: 5px;background-color:red;height:220px;'></div> 
        <div class="horcols-4 col-sm-3" style='border-radius: 5px;background-color:red;height:220px;'></div> 
        <div class="horcols-4 col-sm-3" style='border-radius: 5px;background-color:red;height:220px;'></div> 

       </div> 
      </div> 

     </div> 


    </div> 

</body>

來源

2016-05-07 16:47:46

嗨，感謝您的回答，但這不是我要找的東西，我需要一些東西來分隔列號，而不影響列號，我的意思是如果我使用col-4我需要使用它不想使用col-3，否則會看起來很糟糕 –

bootstrap的問題在於，如果使用12列網格並佔用12列，那麼在這種情況下不會留下任何用於邊距的空間，而使用flexbox將會完美 –

也許你可以試試這個>twitter bootstrap grid system. Spacing between columns ，他們已經設法回答這個問題。

也試試這個：它呈現空間而不添加額外的div。

<div class="row"> 
<div class="col-md-6"> 
    <div class="col-md-12"> 
    Some Content.. 
    </div> 
</div> 
<div class="col-md-6"> 
    <div class="col-md-12"> 
    Some Second Content.. 
    </div> 
</div> 
</div>

這會自動在2個div之間渲染一些空間。

來源

2016-05-07 16:50:28 Freak

我試過這個，它不工作 –

有多難過，@NedalJedidi先生你在這裏試過> [col-md-offset- *]（http://getbootstrap.com/css/#grid-offsetting），上面的鏈接是否提供了一些東西 – Freak

你這個，它會按照你需要的模型來定義網格。

<head> 
     <style> 
      .col-sm-12 { margin:3px; width:280px;} 
      .col-sm-3 { margin: 3px; } 
     </style> 
    </head> 

    <body> 
     <div class="container"> 
      <div class="outer row"> 
       <div class="col-sm-3" style='border-radius: 5px;border: 2px solid green;'> 
        <div class="row"> 
         <div class="col-sm-12" style='border-radius: 5px;background-color:red;height:70px;'></div> 
         <div class="col-sm-12" style='border-radius: 5px;background-color:red;height:140px;'></div> 
         <div class="col-sm-12" style='border-radius: 5px;background-color:red;height:140px;'></div> 
         <div class="col-sm-12" style='border-radius: 5px;background-color:red;height:140px;'></div> 

        </div> 
       </div> 
       <div class="col-sm-8" style='border-radius: 5px;border: 2px solid red;'> 
        <div class="inner row"> 
         <div class="horcols-4 col-sm-3 " style='border-radius: 5px;background-color:red;height:220px;'></div> 
         <div class="horcols-4 col-sm-3" style='border-radius: 5px;background-color:red;height:220px;'></div> 
         <div class="horcols-4 col-sm-3" style='border-radius: 5px;background-color:red;height:220px;'></div> 
        </div> 
        <div class="col-sm-1" > 
        </div> 
       </div> 
      </div> 
     </div> 
    </body>

來源

2016-05-07 17:09:49 sumngh

bootstrap列和填充不工作

回答

相關問題