ブートストラップWebページ

Question

それは少し奇妙に聞こえる可能性がありますが、私はいくつかの助けを必要とし、Webページには3つのセクションが含まれている必要はあり行を持っている必要があり、最初のセクションでは、1列のオフセット、およびセクション間のスペースしている必要がありますこの部分まで10pxにする必要があります。

2番目の行は2つの等しいセクションを持ち、そのエッジは前の行のエッジと揃えられていなければなりません。最初のセクションは1つの列のオフセットを持ち、セクション間のスペースは10pxでなければなりません。

私の問題は、どのようにそのエッジが前の行のエッジに整列されていること、それらとも間の10pxの距離と同じ幅のこれら二つのセクションを作成することができ、第二の行です。

私はあなたの問題の絵をみましょう。

私の最初の行のコードは次のとおりです。

<div class="barra row"> 
     <div class="col-md-3 col-md-offset-1 col-sm-3 col-xs-3 col-xs-offset-1 colum4"></div> 
     <div class="col-md-3 col-sm-3 col-xs-3 leftMargin colum4" id="a"></div> 
     <div class="col-md-3 col-sm-3 col-xs-3 leftMargin colum4" id="b"></div> 
</div> 

二行のコードがどうなりますか？

Answer 1

私が正しくあなたの記述を解釈していた場合、次の行は次のようになります。

<div class="row"> 
    <div class="col-sm-5" style="margin-right:10px;></div> 
    <div class="col-sm-5></div> 
    </div> 

Answer 2

さて、これを試してください：

のセクションでは、最初の行に整列されていないこのコードで

<div class="row"> 
    <div class="col-xs-1"></div> 
    <div class="col-xs-11"> 
     <div class="row"> 
      <div class="col-xs-4 colum4" style="margin-right:10px; width:calc(33.333% - 6.666px);"></div> 
      <div class="col-xs-4 colum4" style="margin-right:10px; width:calc(33.333% - 6.666px);"></div> 
      <div class="col-xs-4 colum4" style="width:calc(33.333% - 6.666px);"></div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-6" style="margin-right:10px; width:calc(50% - 5px);"></div> 
      <div class="col-xs-6" style=" width:calc(50% - 5px);"></div> 
     </div> 
    </div> 
</div>