兩欄佈局引導

這是類似的佈局，我想實現：兩欄佈局引導

我現在

<div class="row "> 
     <div class="col-lg-6 row-eq-height push-right"> 
      <img src="1.jpg" class="img-responsive"> 
     </div> 

     <div class="col-lg-6 row-eq-height"> 
      <div class="eq-row-text "> 
       <p class="row-text">Text description for image </p> 
      </div> 
     </div> 
    </div> 

    <div class="row "> 
     <div class="col-lg-6 row-eq-height "> 
      <div class="eq-row-text "> 
       <p class="row-text"> Text description for the image </p> 
      </div> 
     </div> 

     <div class="col-lg-6 row-eq-height"> 
      <img src="1.jpg" class="img-responsive"> 
     </div> 
    </div>

我已經嘗試使用的代碼CSS類「無填充」，並嘗試玩邊緣。當我應用0填充時，第一個圖像的左側接觸瀏覽器的邊緣（這是所需的），但是另一個邊緣（圖像的右側）仍然有一些空的空間。

我該如何擺脫那個空的空間得到像參考佈局那樣的結果？

來源

2016-09-19 eju

您可能需要更大的圖像來填充右側的空白區域。另外，從'col - ** - **'元素中刪除填充將使列的內容拉出'.row'元素，因爲它們的負左右邊距等於列元素的填充。 – hungerstar

可能存在<p>填充/邊距問題，也可能是<img>填充/邊距問題。然而，這似乎是行內元素大小的一個問題。

，但我卻貌似修復我PEN HERE

問題我添加了一個height: ***到行類，這可能與您使用row-eq-height引導類需要爲理想的效果。

HTML

<div class="row "> 
    <div class="col-lg-6 row-eq-height push-right"> 
     <img src="1.jpg" class="img-responsive"> 
    </div> 
    <div class="col-lg-6 row-eq-height"> 
     <div class="eq-row-text "> 
      <p class="row-text">Text description for image </p> 
     </div> 
    </div> 
</div> 

<div class="row"> 
    <div class="col-lg-6 row-eq-height "> 
      <div class="eq-row-text "> 
       <p class="row-text"> Text description for the image </p> 
      </div> 
     </div> 
    <div class="col-lg-6 row-eq-height"> 
      <img src="1.jpg" class="img-responsive"> 
    </div> 
</div>

CSS

p{ 
    margin: 0; 
    padding: 0; 
} 
img{ 
    margin: 0; 
    padding: 0; 
} 
.row { 
    margin: 0; 
    padding: 0; 
    height:60px; 
    background-color: #eee 
}

來源

2016-09-19 17:13:49 Illdapt

看不到downvote的原因，看筆，問題解決。 – Illdapt

全局重置元素樣式和引導類來定位特定的容器元素似乎是一個壞主意。可能有很多元素不需要/不需要全局重置。也許將樣式範圍限定在目標容器上。 – hungerstar

是的，我知道他可能不需要重置全局變量，它們被包括來顯示他們確實沒有任何問題。這不是教授理想標準的時刻，而是關注當前的問題。 Bootstrap 4還具有[實用程序類]（http://v4-alpha.getbootstrap.com/components/utilities/）以通過框架協助保證金/填充。 – Illdapt

.col-md-6{ 
    padding-right: 0px; 
    padding-left: 0px; 
}

來源

2016-09-19 17:15:27

如果使用LESS/SASS來源：變化@grid-gutter-width在變量文件，以0

來源

2016-09-19 17:33:33 Mike

如果你想擺脫您需要使用白色空間來擴大圖像以跨越列。您可以使用css手動調整圖像的寬度：

img { 
    width: 100%; 
}

來源

2016-09-19 17:43:43

兩欄佈局引導

回答

相關問題