Html xs中的中心引导按钮

我花了几个小时在这上面，我不能让这个按钮居中当屏幕宽度进入xs模式，它开始定位自己的基础上离开左侧。我试着查看引导程序，但找不到任何关于为什么会发生这种情况的明确指示

这是我的代码，主要是第三个主div块，里面有btn posit类和媒体查询461-767px。谢谢

推特
获得报价

这会让你接近你想要的

这些问题：

中包含按钮的列有一个

col-xs-10

类，如果希望按钮居中，则该类应为

col-xs-12

推特按钮的右边仍然留有xs大小的边距，这将推到左边，阻止它居中

---

如果您只希望菜单居中，则不需要使用

col-*

类来包装它们。删除这些内容并应用

.text center

（您已经有了），然后删除所有用于偏移边距的媒体查询，并尝试将该列居中。但是我认为使用

transform:translateX（-1）时会出现一些显示问题所以我只是反转了图像并删除了
转换
行。浏览器需要做的工作越少越好，所以如果你能更改图像，我就这么做


$（文档）.ready（函数（）{
变量引号={
马里奥：[“祝你晚安！”，“晚安。啊，意大利面。啊，饺子。啊，米娅妈妈。”，“你知道他们怎么说的：所有的烤面包机都烤面包。”，
路易吉：[我们走吧…，“哦，是的！现在谁是第一？！路易吉！”，“现在，这才是真正的行动”，
鲍瑟：[“我是胡乌格！近距离更吓人，是吗？”，“哈哈哈！你不可能准备好和我较量。继续练习，皮普·斯奎克！”，
桃子：[哦，我赢了吗？，“桃子，桃子，桃子！耶！呜呜！”，
Yoshi:['Yoshi！']，
狐狸：[“我是狐狸，回基地去！”，“祝你下次好运，法尔科！”，
猎鹰：[“猎鹰踢！”，“蓝猎鹰！”，“让我看看你的动作！”，
Marth:[“Konkaiwa bokuno kachidane！（这一次是我的胜利！）”，“Kyumo ikinobiru kotoga dekita.（即使在今天，我也能活下来）。”，
“Bokuwa makeru wake niwa ikenainda！（我不可能输！）”，
坑：[“三件神圣的宝藏！”，“你的游戏结束了！”，“你只有这些吗？”，
链接：[“…”]，
艾克：[“太好了……以太！”，“我为我的朋友而战。”，“我不会同情你的。”，
卢卡里奥：[“看，光环的力量！”，“光环与我同在！”，“最大光环！”，
‘Wii Fit Trainer’：[“高能量，移动身体！”，“向太阳致敬！”，“努力调整腹部。”，
酋长：[“我一直在等你，时间的英雄……”，“时间的流动总是残酷的。”，
加南多夫：[英雄？…我比你想象的“英雄”活得更长。，“看！恶魔王的力量！”，
“我是加农多夫，恶魔之王。不要对这个头衔掉以轻心。”，
麦克：[“让他们吃吧，麦克！”，“干得好，麦克！你是冠军，宝贝！”，“动作不错，麦克。我几乎看不到你，儿子。”，
帕卢蒂娜：[“你将被净化。”，“没有人能躲开光。”，“天上的烟火！”，
罗宾：[“胜利的关键在于内在。”，“我总是领先三步。”，“看来我们的命运是连在一起的。”，
Shulk:[“现在是Shulk时间！”，“我可以改变未来！”，“未来由我们决定！”，
Sonic:[“那太容易了！”，“以后再做一次吧！”，
法尔科：[就个人而言，我更喜欢空气！”，“你不值得这么麻烦。”，
瓦里奥：[“哇哇！”，“胜利游行时间到了。”，
‘卡通链接’：[“…”]，
露西娜：[“未来不是书面的！”，“是时候改变命运了！”]
}
var nameArr=['Mario'、'Luigi'、'Bowser'、'Peach'、'Yoshi'、'Lucina'、'Bowser jr'、'Wario'、'game and watch'、'donkeyk'、'diddyk'、'Link'、'Zelda'，
“Sheik”、“Ganandorf”、“Toon Link”、“samus”、“zero suite samus”、“Pit”、“Palutena”、“Marth”、“Ike”、“Robin”、“kirby”、“king deedeedee”、“meta knight”，
‘Mac’、‘占位符’、‘狐狸’、‘猎鹰’、‘皮卡丘’、‘查里扎德’、‘卢卡里奥’、‘吉格利普夫’、‘格瑞尼娅’、‘猎鸭’、‘罗布’、‘尼斯’、‘猎鹰’、‘村民’，
‘olimar’、‘Wii Fit Trainer’、‘dr mario’、‘dark pit’、‘Lucina’、‘Shulk’、‘pacman’、‘Megaman’、‘Sonic’；
var imgurID='0RQtP'；
var key=“cfb3f862ab07c”；
函数randomFxn（）{
$.ajax({
键入：“GET”，
网址：'https://api.imgur.com/3/album/“+imgurID+”/images”，
标题：{'Authorization'：'Client ID'+key}，
}).完成（功能（数据）{
展示区（数据）
});
}
var lastNum='70'；
功能展示区（jsonData）{
变量名=“”；
做{
var nameNum=Math.floor（Math.random（）*（Object.keys（quotes.length））；
//var-nameNum=70；
console.log（nameNum）；
}while（nameNum==lastNum）
console.log（lastNum）；
lastNum=nameNum；
console.log（lastNum）；
name=Object.keys（引号）[nameNum]；
var quoterarlength=quotes[name].length；
var randQuoteNum=Math.floor（Math.random（）*quotarlength）
var randQuote='\''+引号[name][randQuoteNum]+'\''；
var indexMult=（nameArr.indexOf（name）*8）；
var addToIndex=Math.floor（Math.random（）*8）；
var url=jsonData.data[（indexMult）+addToIndex].link；
var imgCss='url（'+url+'）；
var isReverse=Math.floor（Math.random（）*2）；
$（'h3'）。文本（'-'+名称）；
$（'h2'）.text（'Hero？…我比你想象的“heros”活得更久。'）；
$（'.bg'）.fadeOut（500，function（）{
如果（isReverse==1）{
$（this）.css（{'background-image'：imgCss，'transform'：'scaleX（1）}）.fadeIn（700）；
}
否则{
$（this.css（{'background-image'：imgCss，'transform'：'scaleX（-1）}）.fadeIn（700）；
}						
});
}
var num=0；
$（'.quote btn'）。单击（函数（）{
如果（num==0）{
num++；
随机fxn（）；
setTimeout（函数（）{
num=0；
}, 1200);
}
});
});
body，html{
身高：100%；
}
.bg，
.报价btn{
背景重复：无重复；
背景尺寸：封面；
}
.bg{
背景图像：url（“http://i.imgur.com/sxwO4y3.
<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 text-center btn-posit">
            <button class="btn btn-primary twit-btn"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"><span id="twit-Text">Tweet it</span></i></button>
            <button class="btn btn-default quote-btn"><div id="whole-text">Get Quote</div></button>
        </div>
    </div>