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">&nbsp;</h5> <p>1</p> <p>2</p> </div> </div>

http://jsfiddle.net/ytcpx/1/

jquery css html5 twitter-bootstrap

Comments

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -