Question

我有两列需要彼此相邻。下面是附图。目前，它们未正确对齐。 enter image description here

此代码如下所示：

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应该相邻对齐，即Stories应该与它相邻的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

我在上面看到了Dave的回答，另一个实现是在你的第一个生成的p标签上放一个类，使其崩溃。

http://www.bootply.com/Ik1hfc9aW0

<强> HTML

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

<强> CSS

.first{
   margin-top:56px;
}

引导列未同步对齐

2 个答案: