在所有設備上使自舉盒的高度相同

我一直在試圖使兩個面板（盒子）具有相同的大小，不管其中的文本有多長。我意識到，在我的電腦上，兩個盒子是對齊的，但在我的筆記本電腦上卻沒有。這裏的頁面看起來像我的筆記本電腦：在所有設備上使自舉盒的高度相同

代碼：

<div class="row"> 
     <div class="col-lg-12"> 
      <h1 class="page-header"> 
       Bine aţi venit la ATLmath! 
      </h1> 
     </div> 
     <div class="col-md-6"> 
      <div class="panel panel-info"> 
       <div class="panel-heading"> 
        <h4><i class="glyphicon glyphicon-book"></i> Probleme rezolvate</h4> 
       </div> 
       <div class="panel-body"> 
        <p>Puteţi găsi modele de probleme rezolvate, împreuna cu explicaţii si desene pentru a asigura fixarea cunoştinţelor. Problemele rezolvate sunt grupate in două categorii:</p> 
        <ul> 
         <li>Probleme de geometrie</li> 
         <li>Probleme de algebră</li> 
        </ul> 

        <a href="probleme.php" class="btn btn-primary" style="display:block;">Probleme</a> 

       </div> 
      </div> 
     </div> 
     <div class="col-md-6"> 
      <div class="panel panel-info"> 
       <div class="panel-heading"> 
        <h4><i class="glyphicon glyphicon-ok"></i> Probleme de testare a cunoştinţelor</h4> 
       </div> 
       <div class="panel-body"> 
        <p>Testele de evaluare vor testa capacitatea elevilor de a rezolva probleme similare cu cele din categoria "Probleme rezolvate". Şi aici, problemele vor fi grupate in două categorii:</p> 
        <ul> 
         <li>Probleme de geometrie</li> 
         <li>Probleme de algebră</li> 
        </ul> 
        <a href="teste.php" class="btn btn-primary" style="display:block;">Teste</a> 
       </div> 
      </div> 
     </div> 
    </div>

我想知道我怎麼可以讓他們相同的高度。我在谷歌上搜索過這個，我什麼也做不了。

編輯：我想它看起來像這樣每個設備

來源

2016-10-25 MCM

'.panel {高度：30％; ''或者你不是在尋找一個固定的高度？（我認爲自從你說過「無論文本多長時，尺寸相同」 – Ivaro18

或者您希望無論文本有多長時間，2格的尺寸都是相同的尺寸？ – Ivaro18

我希望兩者的尺寸相同，甚至相同如果我在第一個文本中只有1行，在第二個文本中只有5行 – MCM

你使用class「row-eq-height」修復了你的問題，這是一個引導默認的css，用於在一行中使用多列保持相等的高度。你必須檢查我的演示html結構becoz我改變了一點點的結構。

<div class="row"> 
    <div class="col-lg-12"> 
     <h1 class="page-header"> 
      Bine aţi venit la ATLmath! 
     </h1> 
    </div> 
</div> .........cont..

http://codepen.io/inewton/pen/rrRwAw

來源

2016-10-25 10:09:50

您可以通過使用最小寬度達到這個上：;和最小高度：;您可以使用此指定盒子所需的最小數量的像素，這也將防止您的網站在使用不同的筆記本電腦/電腦（屏幕尺寸各不相同）時發生變形，並且如果您不希望它變得更大，你也可以用max代替min作爲語句

來源

2016-10-25 07:53:59

在所有設備上使自舉盒的高度相同

回答

相關問題