datatables sayfalandırma düğmeleri - Kaldır

Question

anda benim sayfalandırma gibi görünüyor istenmeyen alan: Ben düğmeleri arasındaki boşluğu kaldırmak için, ancak başarısız olmuştur nasıl çalışmak çalışıyorum

. css ben sayfalandırmaya bulabilirsiniz sadece referansları dosyaları ise şunlardır:

jquery.dataTables.css (319-394):

} 
.dataTables_wrapper .dataTables_paginate { 
    float: right; 
    text-align: right; 
    padding-top: 0.25em; 
} 
.dataTables_wrapper .dataTables_paginate .paginate_button { 
    box-sizing: border-box; 
    display: inline-block; 
    min-width: 1.5em; 
    padding: 0.5em 1em; 
    margin-left: 2px; 
    text-align: center; 
    text-decoration: none !important; 
    cursor: pointer; 
    *cursor: hand; 
    color: #333333 !important; 
    border: 1px solid transparent; 
} 
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { 
    color: #333333 !important; 
    background-color: white; 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, gainsboro)); 
    /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, white 0%, gainsboro 100%); 
    /* Chrome10+,Safari5.1+ */ 
    background: -moz-linear-gradient(top, white 0%, gainsboro 100%); 
    /* FF3.6+ */ 
    background: -ms-linear-gradient(top, white 0%, gainsboro 100%); 
    /* IE10+ */ 
    background: -o-linear-gradient(top, white 0%, gainsboro 100%); 
    /* Opera 11.10+ */ 
    background: linear-gradient(to bottom, white 0%, gainsboro 100%); 
    /* W3C */ 
} 
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active { 
    cursor: default; 
    color: #666 !important; 
    border: 1px solid transparent; 
    background: transparent; 
    box-shadow: none; 
} 
/*.dataTables_wrapper .dataTables_paginate .paginate_button:hover { 
    color: white !important; 
    border: 1px solid white; 
    background-color: white; 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111111)); 
    /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #585858 0%, #111111 100%); 
    /* Chrome10+,Safari5.1+ */ 
    background: -moz-linear-gradient(top, #585858 0%, #111111 100%); 
    /* FF3.6+ */ 
    background: -ms-linear-gradient(top, #585858 0%, #111111 100%); 
    /* IE10+ */ 
    background: -o-linear-gradient(top, #585858 0%, #111111 100%); 
    /* Opera 11.10+ */ 
    background: linear-gradient(to bottom, #585858 0%, #111111 100%); 
    /* W3C */ 
} */ 
.dataTables_wrapper .dataTables_paginate .paginate_button:active { 
    outline: none; 
    background-color: #2b2b2b; 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2b2b), color-stop(100%, #0c0c0c)); 
    /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%); 
    /* Chrome10+,Safari5.1+ */ 
    background: -moz-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%); 
    /* FF3.6+ */ 
    background: -ms-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%); 
    /* IE10+ */ 
    background: -o-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%); 
    /* Opera 11.10+ */ 
    background: linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%); 
    /* W3C */ 
    box-shadow: inset 0 0 3px #111; 
} 

dataTables.bootstrap.css (32-50):

div.dataTables_paginate { 
    margin: 0; 
    white-space: nowrap; 
    text-align: right; 
} 

div.dataTables_paginate ul.pagination { 
    margin: 2px 0; 
    white-space: nowrap; 
} 

@media screen and (max-width: 767px) { 
    div.dataTables_length, 
    div.dataTables_filter, 
    div.dataTables_info, 
    div.dataTables_paginate { 
     text-align: center; 
    } 
} 

Ancak, büyük kenar boşlukları veya dolgularla ilgili bir başvuru bulamıyorum. CSS tam olarak benim güçlü takımım olmasa da.

Sayfadaki ilgili düğmelerle ilgili olabilecek başka referanslar olup olmadığını bilen var mı? Ya da sorunu düzeltebilir mi?

Answer 1

Bu sorun, hata veritabanında zaten belirtilmiştir. Css'yi kesmeniz gerekmez.

bootstrap pagination looks bad #39

datatables kendi Bootstrap beri stil (jquery.dataTables.css) ve gerekli olan her şeyi sağlamak entegrasyon dosyasını dahil gerek yok

.

Dolayısıyla, sadece jquery.dataTables.css silme ve html biçembentlerindeki dataTables.bootstrap.min.css tutun.

Answer 2

Oh evet. Hatayı yeniden üretmek kolaydır. Sağ üst köşedeki eklenen CSS dışarı yorum yapmak>http://jsfiddle.net/s6c35ogt/
deneyin ve siz aynı davranışı görürsünüz -

.dataTables_wrapper .dataTables_paginate .paginate_button { 
    padding : 0px; 
    margin-left: 0px; 
    display: inline; 
    border: 0px; 
} 
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { 
    border: 0px; 
} 

demo: Bunu çözmek için, diğer CSS referanslar sonra bu CSS eklemek tanımlamak.