引導列未同步對齊

Question

我有兩列需要彼此相鄰。下面附上的是這個圖片。目前，它們沒有正確對齊。

這樣做的代碼如下所示：

HTML：

<div class="row" id="bldgInfo"> 
<div class="col-md-2" id="titles"> 
</div> 
<div class="col-md-2" id="values"> 
</div> 

的jQuery：

$("#info").tooltip();//call the tooltip function 
    $("#info").click(function() { 
     infoHead = "infoHead" 
     type = $("#ResidentialBuildingType").val(); 
     stories = $("#ResidentialBuildingStories").val(); 
     size = $("#ResidentialBuildingSize").val(); 
     url = "/ResidentialBuilding/getBldgInfo?type=" + type + "&stories=" + stories + "&size=" + size; 
     $('#bldgInfo').slideToggle(function() { 
      console.log(url); 
      $('#titles').empty(); 
      $("#values").empty(); 
      $.getJSON(url, function (data) { 
       $.each(data, function (index, value) { 
        $("#titles").append('<h5 id="' + infoHead + '">' + value.r.type + " (" + value.r.stories + ")" + '</h5>'); 
        $("#titles").append('<p>' + "Stories" + '</p>'); 
        $("#titles").append('<p>' + "Age" + '</p>'); 
        $("#titles").append('<p>' + "Size" + '</p>'); 
        $("#titles").append('<p>' + "Orientation" + '</p>'); 
        $("#titles").append('<p>' + "Shape" + '</p>'); 
        $("#titles").append('<p>' + "Floor Height" + '</p>'); 
        $("#titles").append('<p>' + "Foundation" + '</p>'); 
        $("#titles").append('<p>' + "Window Percent" + '</p>'); 
        $("#titles").append('<p>' + "Heating" + '</p>'); 
        $("#titles").append('<p>' + "Cooling" + '</p>'); 
        $("#values").append('<p>' + value.r.stories + '</p>'); 
       }); 
      }); 
     }); 
    }); 

的#title列包含SFD（1）文本和它下面的p元素。 ＃值應該對齊相鄰，即故事應該有1（它目前的方式）毗鄰它。任何幫助？我已經嘗試了大部分我知道的東西

Answer 1

這只是第一個按鈕中的按鈕，其他按鈕不對齊。 您可以在第二秒做一個不可見的按鈕，或將按鈕移動到它自己的行中： 我將col-md更改爲col-xs，因此它在視口較小的jsfiddle上看起來很正確，因此我將id更改爲一個類，因爲我正在重複使用它。

<div class="row" id="bldgInfo"> 
    <div class="col-xs-2" id="titles"> 
    <h5 class="infoHead">SFD (1)</h5> 
    <p>Stories</p> 
    <p>Age</p> 
    </div> 
    <div class="col-xs-2" id="values"> 
    <h5 class="infoHead invisible">&nbsp;</h5> 
    <p>1</p> 
    <p>2</p> 
    </div> 
</div> 

http://jsfiddle.net/yTCPX/1/

Answer 2

我看到戴維的回答以上，另一種實現方式是把你的第一個產生p標籤一類顛簸下來。

http://www.bootply.com/Ik1hfc9aW0

HTML

<p class="first">1</p> 

CSS

.first{ 
    margin-top:56px; 
}