Twitter bootstrap 在不固定高度的情况下,将按钮垂直对齐到中间,以显示移动视图和桌面视图
我正在使用bootstrippon中的bootstrapsnipplet创建包含行的列表。 我尝试的是将红色按钮垂直对齐到中间。我找不到任何方法来流畅地对齐它(当高度为100%时),所以我将高度固定为10em。这一次,它在工作桌面视图中工作,但在移动视图中,它在红色按钮的上下两侧创建了一个间隙。 您能帮我将桌面视图和移动视图垂直居中对齐,而不为移动视图创建间隙吗 这是我在HAML中的html代码。我不使用任何特定的css,只使用引导Twitter bootstrap 在不固定高度的情况下,将按钮垂直对齐到中间,以显示移动视图和桌面视图,twitter-bootstrap,vertical-alignment,Twitter Bootstrap,Vertical Alignment,我正在使用bootstrippon中的bootstrapsnipplet创建包含行的列表。 我尝试的是将红色按钮垂直对齐到中间。我找不到任何方法来流畅地对齐它(当高度为100%时),所以我将高度固定为10em。这一次,它在工作桌面视图中工作,但在移动视图中,它在红色按钮的上下两侧创建了一个间隙。 您能帮我将桌面视图和移动视图垂直居中对齐,而不为移动视图创建间隙吗 这是我在HAML中的html代码。我不使用任何特定的css,只使用引导 .row .span8 .row .
.row
.span8
.row
.span8
%h4
%strong
%a{:href => "#"} {{officialname}}
.row
.span2
%a.thumbnail{:href => "#"}
%img{:src => "{{provider_image}}",id: "provideredit" , alt: ""}
/%img{alt: "", src: "{{provider_image}}", height: "135", width: "135"}/
.span6
.tabbable
%ul.nav.nav-tabs{:style => "margin-bottom: 10px"}
%li.active
%a{"data-toggle" => "tab", :href => "#pane1_{{id}}"} Hakkında
%li
%a{"data-toggle" => "tab", :href => "#pane2_{{id}}"} Referansları
%li
%a{"data-toggle" => "tab", :href => "#pane3_{{id}}"} Sertifikaları
%li
%a{"data-toggle" => "tab", :href => "#pane4_{{id}}"} Fotoğrafları
.tab-content{:style => "margin-bottom: 10px"}
#pane1.tab-pane.active{:id => "{{id}}"}
{{business_description}}
#pane2.tab-pane{:id => "{{id}}"}
{{#each references}}
%ul.unstyled.comments.list-hover.list-striped
%li
.avatar1.pull-left
/%img{:alt => "Avatar", :height => "23", :src => "#", :width => "23"}/
.body
.name
%a.text-contrast{:href => "#"} {{referencer}} | {{category}}
%a1.btn1.btn1-link.ok.has-tooltip.pull-right
Makul Fiyat
{{#ifCond pricerating "1"}}
%i.icon-thumbs-up
{{else}}
%i.icon-thumbs-down
{{/ifCond}}
%a1.btn1.btn1-link.remove.has-tooltip.pull-right
Hizmet Kalitesi
{{#ifCond servicerating "1"}}
%i.icon-thumbs-up
{{else}}
%i.icon-thumbs-down
{{/ifCond}}
%p
.text {{body}}
.text-right
%small.date.muted
%i.icon-time
%span.timeago.fade.has-tooltip.in{"data-original-title" => "August 28, 2013 - 11:08", "data-placement" => "top", :title => ""} 17 days ago
{{/each}}
#pane3.tab-pane{:id => "{{_id}}"}
.qualification-gallery
%a{ href: "{{certificate_image1.url}}"}
%img{alt: "", src: "{{certificate_image1.thumb.url}}", height: "135", width: "135"}/
%a{ href: "{{certificate_image2.url}}"}
%img{alt: "", src: "{{certificate_image2.thumb.url}}", height: "135", width: "135"}/
%a{ href: "{{licence_image1.url}}"}
%img{alt: "", src: "{{licence_image1.thumb.url}}", height: "135", width: "135"}/
%a{ href: "{{licence_image2.url}}"}
%img{alt: "", src: "{{licence_image2.thumb.url}}", height: "135", width: "135"}/
#pane4.tab-pane{:id => "{{_id}}"}
.image-gallery
%a{ href: "{{provider_image.url}}"}
%img{alt: "", src: "{{provider_image.thumb.url}}", height: "135", width: "135"}/
%a{ href: "{{provider_image1.url}}"}
%img{alt: "", src: "{{provider_image1.thumb.url}}", height: "135", width: "135"}/
%a{ href: "{{provider_image2.url}}"}
%img{alt: "", src: "{{provider_image2.thumb.url}}", height: "135", width: "135"}/
%a{ href: "{{provider_image3.url}}"}
%img{alt: "", src: "{{provider_image3.thumb.url}}", height: "135", width: "135"}/
.row
.span8
%p
%p
%i.icon-certificate
%a{:href => "#"} {{workdonecount}} Hizmet Vermiş
|
%i.icon-credit
%a{:href => "#"} {{pricescore}} Fiyat Puanı
|
%i.icon-thumbs-up
%a{:href => "#"} {{servicescore}} Hizmet Puanı
|
%i.icon-map-marker
%input{:id=>"lat1_{{id}}", type: "hidden",value: "{{lat}}" }/
%input{:id=>"lat2_{{id}}", type: "hidden",value: "{{itinerarylat}}" }/
%input{:id=>"lon1_{{id}}", type: "hidden",value: "{{lng}}" }/
%input{:id=>"lon2_{{id}}", type: "hidden",value: "{{itinerarylon}}" }/
%output{:id=>"result-distance_{{id}}"}
|
%i.icon-share
%a{:href => "#"} 3 Arkadaşın Hizmet Almış
|
%i.icon-check
%a{:href => "#"} Hizmetkutusu Onaylı
.span3
.row{style: "height: 10em; display: table-cell; vertical-align:middle;"}
%input.style3{:id=>"givequote", :type => "checkbox" , data: { id: "{{id}}" } }/
%input#provider_id{:name => "provider_id", :type => "hidden", :value => "{{id}}" }/
%hr/
:javascript
$(document).ready(function() {
var p1 = new LatLon(Geo.parseDMS($('#lat1_{{id}}').val()), Geo.parseDMS($('#lon1_{{id}}').val()));
var p2 = new LatLon(Geo.parseDMS($('#lat2_{{id}}').val()), Geo.parseDMS($('#lon2_{{id}}').val()));
$('#result-distance_{{id}}').html(p1.distanceTo(p2)+' km');
$('input[type="checkbox"].style3').checkbox({
buttonStyle: 'btn-danger',
buttonStyleChecked: 'btn-success',
checkedClass: 'icon-check' ,
uncheckedClass: 'icon-check-empty'
});
});
我认为最好的解决方案是使用媒体查询,以移动浏览器的大小为目标,使高度等于您的按钮高度。 例如:
@media (max-width: 480px) {
.teklif {
height: 40px;
}
}
谢谢你,麦克斯。关于你的回答,我已经通过这个css整理好了 哈默:
谢谢你,麦克斯,我已经搞定了
.span3
.row{id: "xx2"}
%input.style3{:id=>"givequote", :type => "checkbox" , data: { id: "{{id}}" } }/
%input#provider_id{:name => "provider_id", :type => "hidden", :value => "{{id}}" }/
:css
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#xx2 {
display: table-cell;
vertical-align: middle;
height: 40px; important !
}
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
#xx2 {
display: table-cell;
vertical-align: middle;
height: 40px; important !
}
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
#xx2 {
display: table-cell;
vertical-align: middle;
height: 40px; important !
}
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
#xx2 {
display: table-cell;
vertical-align: middle;
height: 200px; important !
}
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
#xx2 {
display: table-cell;
vertical-align: middle;
height: 200px; important !
}
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
#xx2 {
display: table-cell;
vertical-align: middle;
height: 200px; important !
}
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
#xx2 {
display: table-cell;
vertical-align: middle;
height: 200px; important !
}
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
#xx2 {
display: table-cell;
vertical-align: middle;
height: 200px; important !
}
}
/* iPhone 5 -------To-DO---- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.7),
only screen and (min-device-pixel-ratio : 1.7) {
#xx2 {
display: table-cell;
vertical-align: middle;
height: 200px; important !
}
}