Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Twitter's Bootstrap 3 with ShareThis widget

bootstrap3 looks like there is a compatibility issue with the sharethis app widgets... images looked cropped due to the use of

{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } see demo http://gurroladesign.com/bootstrap3/

compatibily issue not existant on previous version of bootstrap http://gurroladesign.com/bootstrap/starter-template.html

have not been able to solve? any help greatly appreciated

like image 913
George Gurrola Avatar asked Aug 10 '13 20:08

George Gurrola


People also ask

What is the difference between Bootstrap and twitter bootstrap?

There's no difference. Twitter Bootstrap was the official name for version 1.0 (Twitter Bootstrap). Later the name has been shortened.

What kind of framework is twitter bootstrap?

Twitter Bootstrap is an open source front end framework for HTML, CSS and JS, using which we can create a responsive UI for our web application. This is supported by all major browsers.

What does twitter bootstrap have to do with web sites?

Twitter Bootstrap is a front end framework to develop web apps and sites fast. In modern web development, there are several components which are required in almost all web projects. Bootstrap provides you with all those basic modules - Grid, Typography, Tables, Forms, Buttons, and Responsiveness.


1 Answers

Wrap your code (span tags) in a container and reset css box-sizing property to content-box of this spans (see also: Right border of the AddThis counter missing with Twitter's Bootstrap 3):

your html:

<div id="sharethis">    
  <span class='st_sharethis_hcount' displayText='ShareThis'></span>
  <span class='st_facebook_hcount' displayText='Facebook'></span>
  <span class='st_twitter_hcount' displayText='Tweet'></span>
  <span class='st_linkedin_hcount' displayText='LinkedIn'></span>
  <span class='st_pinterest_hcount' displayText='Pinterest'></span>
  <span class='st_email_hcount' displayText='Email'></span>
</div>

css (add after the Bootstrap CSS):

#sharethis span
{
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
like image 159
Bass Jobsen Avatar answered Nov 12 '22 23:11

Bass Jobsen