jquery - Bootstrap 列未同步对齐

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 元素。#values 应该相邻对齐，即故事应该与它相邻的 1(当前距离很远)。有什么帮助吗？我已经尝试了我所知道的大部分内容

Answer 1

这只是第一个中的按钮将其他按钮推离对齐。你可以在第二个中制作一个不可见的按钮，或者将按钮移动到它自己的行中:我将 col-md 更改为 col-xs 所以它在视口(viewport)较小的 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/