Bootstrap cut часть кнопок ShareThis

Question

Я пытаюсь вставить код ShareThis на сайт, созданный с помощью Bootstrap.

Проблема в том, что по какой-то причине нижняя часть обеих кнопок отключена, а также я не могу центрировать кнопки с помощью смещений столбца Bootstrap, поскольку кажется невозможным получить обе кнопки, точно центрированные с использованием этого метода.

Какое здесь решение?

<div class="row"> 
    <div class="col-lg-12"> 
     <span class='st_facebook_vcount' displayText='Facebook'></span> 
     <span class='st_twitter_vcount' displayText='Tweet'></span> 
    </div> 
    </div> 

Answer 1

Я не слишком хорошо знаком с кнопками ShareThis, у вас есть ссылка для просмотра сайта?

Что касается центрирования, в настоящее время вы используете col-lg-12, что означает, что он занимает 100% от ширины, и все внутри (ваши кнопки) будет выравниваться по умолчанию по умолчанию. Вам не обязательно будет использовать смещение столбца бутстрапа, но просто поместите промежутки в обертку, как показано ниже. Вы можете узнать больше о сетке Bootstrap здесь http://getbootstrap.com/css/#grid.

<div class="row"> 
    <div class="col-lg-12"> 
    <div class="social-wrapper"> 
     <span class='st_facebook_vcount' displayText='Facebook'></span> 
     <span class='st_twitter_vcount' displayText='Tweet'></span> 
    </div> 
    </div> 
</div> 

Затем добавьте text-align: center к обертке.

.social-wrapper { 
    text-align: center; 
} 

Заканчивать JSFiddle здесь: https://jsfiddle.net/hez7pqbo/