Responsive w/ Bootstrap Column Control spacing issue

mju516

I'm attempting to create a column control for the child row using the method described here https://datatables.net//forums/discussion/28675. However, I'm doing it with the Bootstrap styling.

//Didn't want to put in the full snippet just to make it more readable. 
responsive: {
  details: {
     type: 'column'
  }
},
columns: [
   { data: null, defaultContent: "", className: 'control', orderable: false, targets: 0 },

The issue that I'm dealing with is that the button that is being created isn't quite right in terms of spacing. I mocked up an example in JSFiddle (I know that one uses the columnDefs method, I just wanted to build it quickly). Notice how the buttons are outside of the lines of the created column.

https://jsfiddle.net/2mwjbL8m/1/

I've included some pictures of the inconsistencies that I ran into on my own, depending on the column width.

Any idea how I can get the buttons to align properly?