jquery - bootstrap columns not aligned in sync -
jquery - bootstrap columns not aligned in sync -
i have 2 columns need adjacent each other. attached below image this. currently, not aligned properly.
the code shown below:
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 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>'); }); }); }); });
the #title column contains sfd (1) text , p elements below it. #values should aligned adjacent i.e. stories should have 1 (that way off) adjacent it. help? have tried of know
it's button in first 1 pushing others out of alignment. can create invisible button in second, or move button own row: changed col-md
col-xs
right on jsfiddle viewport smaller, , changed id class because i'm reusing it.
<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"> </h5> <p>1</p> <p>2</p> </div> </div>
http://jsfiddle.net/ytcpx/1/
jquery css html5 twitter-bootstrap
Comments
Post a Comment