圖片和文字之間的空白區域以及當我使用圖片的邊距來粘貼文字時，響應式佈局不起作用

Question

White space圖片和文字之間以及當我使用圖片的邊緣來粘貼文字響應式佈局不起作用。

當我使用margin-left堅持兩個div的 圖像不會因利潤率左

的HTML代碼下屏幕中心：

<section id="aa-about-us"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-md-12"> 
      <div class="aa-about-us-area"> 
      <div class="row"> 
      <div class="aa-title"> 
        <h2>Nature's Paradise</h2> 
        <span></span> 
        </div> 
       <div class="col-md-5"> 
       <div class="aa-about-us-left"> 
        <img src="img/homepagecontent1.jpg" alt="image"> 
       </div> 
       </div> 

       <div class="col-md-7"> 
       <div class="aa-about-us-right"> 

        <div class="text-right"> 
        <p>Karjat is an idyllic town and an upcoming taluka of Raigad district for various development projects.<br/> Situated on the western coast on India, Karjat lies in the downhill of Matheran which is the nearest hill station to Mumbai.<br/> The upside being it comes under the MMRDA development zone and the responsibility for planning is entrusted with CIDCO.<br/> 
     Karjat is Strategically located in the centre of the golden triangle viz. Mumbai, Pune and Nashik, It is well connected with for lane roads and a strong railway network.<br/> Karjat is a railway junction between Mumbai-Pune on Central line.<br/> 
     Karjat is an educational hub as there are many Engineering, Medical Pharmacy, Management colleges and Marine academy.<br/> 
    Project in Raigad district like Reliance SEZ, Navi Mumbai SEZ, International Airport (Navi Mumbai), largest exhibition centre (Panvel) and Terminus Railways Stations (Panvel) etc.<br/> Is enhancing the growth in all fronts required to further fuel Karjat and turn it in to preferred first/second home destinations which is a growth centred destination.<br/> 
    Because of its green and pollution free environment many Bollywood Stars, industrialist, businessmen and corporates have their private farm house in Karjat thus evolving as prime weekend gateway destination.<br/> 
    MMRDA has planned to develop a part of area in Karjat-Khopoli belt as recreational hub.<br/> On the horizon are T20 Cricket League Ground, Paint Ball Park, Theme Park, Amusement Park and golf course. 
</p>     
       </div> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </section> 

的CSS樣式：

#aa-about-us { 
    display: inline; 
    float: left; 
    width: 100%; 
} 
#aa-about-us .aa-about-us-area { 
    display: inline; 
    float: left; 
    width: 100%; 
    padding: 100px 0; 

} 
#aa-about-us .aa-about-us-area .aa-about-us-left { 
    margin-top: 15%; 
    display: inline; 
    float: left; 
    width: 100%; 
} 
#aa-about-us .aa-about-us-area .aa-about-us-left img { 
    border: 1px solid #ddd; 
    border-radius: 4px; 

    width: 100%; 

} 

#aa-about-us .aa-about-us-area .aa-about-us-right p { 
    text-align: center; 
} 


#aa-about-us .aa-about-us-area .aa-about-us-right .text-right { 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    padding: 4px; 

    margin-top: 10%; 
    background-color: #f8f8f8; 
    padding: 10px; 
} 

#aa-about-us .aa-about-us-area .aa-about-us-right { 
    display: inline; 
    float: left; 
    width: 100%; 
} 

.aa-title { 
    display: inline; 
    float: left; 
    width: 100%; 
    text-align: center; 
    margin-bottom: 20px; 
} 
.aa-title p { 
    font-size: 18px; 
    padding: 0 50px; 
} 
.aa-title span { 
    width: 2px; 
    height: 15px; 
    display: inline-block; 
    position: relative; 
} 
.aa-title span:before { 
    content: ''; 
    right: 4px; 
    top: 7px; 
    position: absolute; 
    width: 100px; 
    height: 2px; 
} 
.aa-title span:after { 
    content: ''; 
    left: 4px; 
    top: 7px; 
    position: absolute; 
    width: 100px; 
    height:2px; 
} 

Answer 1

由於您使用的是引導程序框架，因此每列都有預定義的左側和右側填充15px。清除的是填充，

爲此，

.col-md-5,.col-md-7{ 
    padding:0px; 
} 

Answer 2

添加一些類圖像的母公司股利和使用這些類的內容&覆蓋填充。

HTML：

<div class="col-md-5 image-container"> 
      <div class="aa-about-us-left"> 
       <img src="img/homepagecontent1.jpg" alt="image"> 
      </div> 
      </div> 

      <div class="col-md-7 content-container"> 
      <div class="aa-about-us-right"> 

       <div class="text-right"> 
       <p>Text</p>    
      </div> 
      </div> 
      </div> 

CSS：

.image-container { 
padding-right: 0px; 
} 
.content-container { 
padding-left: 0px; 
}