親divの幅で子divを塗りつぶし

Question

子divをparen divの幅で塗りつぶすのにはいくつかの問題がありますが、機能しません。私は解決策を探して、それに基づいてこのコードを試しましたが、うまくいきません。私はコードとそれの結果を添付しています。

<div id="propertiesContainer" class="row col-md-2" style="border:solid 1px;"> 
 
    <div class="list-head-title-container"> 
 
    <h3>Properties</h3> 
 
    </div> 
 

 
    <div class="row" style="border:solid 1px; background-color:darkgrey;width:100%;float:left"> 
 
    <span id="touchpointName" class="uppercase">Customer Download Flag Sync</span> 
 
    </div> 
 
    <div id="condetails" class="row"> 
 
    <img id="appLogo1" class="pull-left" style="width:55px;margin:20px 0px 0px 10px" src="https://appseconnectstore.blob.core.windows.net/applogos/sap-business-one.png" alt="app1"> 
 
    <img class="center" style="width:20px;margin:25px 0px 0px 10px" src="/img/right_arrow.png"> 
 
    <img id="appLogo2" class="pull-right" style="width:55px;margin:20px 0px 0px 0px" src="https://appseconnectstore.blob.core.windows.net/applogos/magento.png" alt="app2"> 
 

 
    </div> 
 
</div>

<div id="propertiesContainer" class="row col-md-2" style="border:solid 1px;"> 
 
    <div class="list-head-title-container"> 
 
    <h3>Properties</h3> 
 
    </div> 
 

 
    <div class="row" style="border:solid 1px; background-color:darkgrey;width:100%;float:left"> 
 
    <span id="touchpointName" class="uppercase">Customer Download Flag Sync</span> 
 
    </div> 
 
    <div id="condetails" class="row"> 
 
    <img id="appLogo1" class="pull-left" style="width:55px;margin:20px 0px 0px 10px" src="https://appseconnectstore.blob.core.windows.net/applogos/sap-business-one.png" alt="app1"> 
 
    <img class="center" style="width:20px;margin:25px 0px 0px 10px" src="/img/right_arrow.png"> 
 
    <img id="appLogo2" class="pull-right" style="width:55px;margin:20px 0px 0px 0px" src="https://appseconnectstore.blob.core.windows.net/applogos/magento.png" alt="app2"> 
 

 
    </div> 
 
</div>

Answer 1

あなたは少し混乱し、ブートストラップクラスをしました。あなたがしたい場合は、子が親の両方のエッジに触れるように、ブートストラップクラスrowは、左右のパディング等しい15ピクセル定義している、あなたが子供のために、負の左右のマージンを設定する必要があります。

それとともに

<div style="border:solid 1px; background-color:darkgrey; margin: 0 -15px;"> 

、ノート、 class="row col-md-2"と同じdivにクラスrowとcol-*-*を適用できないことをご了承ください。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
<div class="row"> 
 
<div id="propertiesContainer" class="col-sm-4 col-md-2" style="border:solid 1px;"> 
 
    <div class="list-head-title-container"> 
 
    <h3>Properties</h3> 
 
    </div> 
 

 
    <div style="border:solid 1px; background-color:darkgrey; margin: 0 -15px;"> 
 
    <span id="touchpointName" class="uppercase">Customer Download Flag Sync</span> 
 
    </div> 
 
    <div id="condetails" class="row"> 
 
    <img id="appLogo1" class="pull-left" style="width:55px;margin:20px 0px 0px 10px" src="https://appseconnectstore.blob.core.windows.net/applogos/sap-business-one.png" alt="app1"> 
 
    <img class="center" style="width:20px;margin:25px 0px 0px 10px" src="/img/right_arrow.png"> 
 
    <img id="appLogo2" class="pull-right" style="width:55px;margin:20px 0px 0px 0px" src="https://appseconnectstore.blob.core.windows.net/applogos/magento.png" alt="app2"> 
 

 
    </div> 
 
</div> 
 
</div> 
 
</div>