Question

我已花费了几个小时的时间，当屏幕宽度进入xs模式时，我无法使此按钮居中，它开始基于左侧定位自己。我试过看引导程序，无法找到任何明确的指示，说明为什么会发生这种情况。

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

https://codepen.io/fullmetal7777/pen/RgKagp

<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>

Answer 1

这会让你接近你想要的。

问题：

如果您希望按钮居中，则带有按钮的列的col-xs-10类应为col-xs-12。
对于xs大小，twitter按钮仍然有正确的边距，将其推向左侧，防止它居中。

https://codepen.io/anon/pen/xrdPVb

Answer 2

如果您只想让菜单居中，则无需使用col-*类来包装它们。删除它们并应用.text-center（您已经拥有），然后删除您用来抵消边距的所有媒体查询，并尝试将该列居中。但是我认为使用transform: translateX(-1);时出现了一些显示问题，所以我只是颠倒了图片并删除了transform行。浏览器必须做的工作越少越好，所以如果你能改变图像，我就是这么做的。

$(document).ready(function(){

var quotes = {
	Mario: ["So long-a-Bowser!", "Nighty nighty. Ah spaghetti. Ah, ravioli. Ahh, mama mia.", "You know what they say: all toasters toast toast."],
	Luigi: ["Let's-a go...", "Oh yeah! Who's number one now?! Luigi!", "Now, THIS is where the real action is"],
	Bowser: ["Im HUUUUGE! Even scarier up close, huh?", "GAH HA HA HA! There's no WAY you're ready for a round against ME. Keep practicing, pip-squeak!"],
	Peach: ['Oh, did I win?', "Go Peachy, Go Peachy, Go Peachy! Yay! Woohoo!"],
	Yoshi: ['Yoshi!'],
	Fox: ["This is Fox, returning to base!", "Better luck next time, Falco!"],
	Falcon: ["Falcon Kick!", 'Blue Falcon!', 'Show me your moves!'],
	Marth: ["Konkaiwa bokuno kachidane! (It's my victory this time!)", "Kyoumo ikinobiru kotoga dekita. (Even today I was able to survive.)",  
			 "Bokuwa makeru wake niwa ikenainda! (There's no way I can lose!)"],
	Pit: ["Three Sacred Treasures!", "It's game over for you!", "That all you got?"],
	Link: ["....."],
	Ike: ["Great... AETHER!", "I fight for my friends.", "You'll get no sympathy from me."],
	Lucario: ["Behold, the power of Aura!", "The Aura is with me!", "Max Aura!"],
	'Wii Fit Trainer': ["High energy, move that body!", "Salute the sun!", "Work hard to tone that tummy."],
	Sheik: ['I\'ve been waiting for you, Hero of Time...', 'The flow of time is always cruel.'],
	Ganandorf: ['Hero? ...I\'ve outlived more "heroes" than you can possibly imagine.', 'Behold! The power of the Demon King!',
				'I am Ganondorf, the Demon King. Don\'t take that title lightly.'],
	Mac: ["Let 'em have it, Mac!", "Way to go, Mac! You're the champ, baby!", "Nice moves, Mac. I can barely keep my eyes on you, son."],
	Palutena: ["You shall be purified.", "No one can hide from the light.", "Celestial Fireworks!"],
	Robin: ["The key to victory lies within.", "I'm always three steps ahead.", "It seems our fates are joined."],
	Shulk: ["Now it's Shulk time!", "I can change the future!", "The future is ours to decide!"],
	Sonic: ["That was almost too easy!", "Let's do that again some time!"],
	Falco: ["Personally, I prefer the air!", "You aren't worth the trouble."],
	Wario: ["Wa-Wa-Wa!", "Time for victory parade."],
	'Toon Link': ["....."],
	Lucina: ["The future is not written!", "Time to change fate!"]
}

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', 'placeholder', 'Fox', 'Falco', 'pikachu', 'charizard', 'Lucario', 'jigglypuff', 'Greninja', 'duck hunt', 'Rob', 'ness', 'Falcon', 'villager', 
			   'olimar', 'Wii Fit Trainer', 'dr mario', 'dark pit', 'Lucina', 'Shulk', 'pacman', 'Megaman', 'Sonic'];




var imgurID = '0RQtP';
var key = "cfb3f86a62ab07c";

function randomFxn(){
	$.ajax({
	type: 'GET',
	url: 'https://api.imgur.com/3/album/' + imgurID + '/images',
	headers: {'Authorization': 'Client-ID '+ key},
	}).done(function(data) {
		showZones(data)
	});
 }


var lastNum = '70';

function showZones(jsonData){
	var name = '';
	
	
	do{
	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(quotes)[nameNum];
	
	var quoteArrLength = quotes[name].length;
	var randQuoteNum = Math.floor(Math.random()*quoteArrLength)
	var randQuote = '\"' + quotes[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').text('-' + name);
	$('h2').text('Hero? ...I\'ve outlived more "heroes" than you can possibly imagine.');

	$('.bg').fadeOut(500, function() {
		if(isReverse==1){
			$(this).css({'background-image': imgCss, 'transform': 'scaleX(1)'}).fadeIn(700);
		}
		else{
			$(this).css({'background-image': imgCss, 'transform': 'scaleX(-1)'}).fadeIn(700);
		}						
	});
}

var num = 0;
$('.quote-btn').click(function(){

	if (num == 0){
		num++;

		randomFxn();

		setTimeout(function(){
			num = 0;
		}, 1200);
	}
});
});

body, html{
	height: 100%;
}

.bg,
.quote-btn {
	background-repeat: no-repeat;
	background-size: cover;
}

.bg{
	background-image: url("http://i.imgur.com/sxwO4y3.jpg");
	height: 100%;
	background-size: 70% 100%;
}

.jumbotron{
	margin-left: 16.66666667%;
	margin-top: -78vh; 
	background-color: rgba(100, 100, 100, 0.4);
	border-style: solid;
	border-color: rgba(0, 0, 0, 0);
}

h2, h3{
	color: white;
	opacity: 1;
	font-weight: 900;

}

h2{
	margin-top: -3vh;
	margin-left: -1.7vw;
}

h3{
	float: right;
}

.quote-btn {
  	border-color: #5e1111 #5e1111 hsl(0, 69%, 17%);
  	background-image: url("http://www.wtfgamersonly.com/wp-content/uploads/2015/06/Super-Smash-Bros.-img.2.jpg");
	background-position: 50% 60%;
	height: 45px;
	width: 140px;	
}

.twit-btn{
	height: 45px;
	width: 140px;
	margin-right: 35px;
}

#whole-text{
	font-weight: 800;
	color: #BC1818;
	font-size: 22px;
}

.btn.quote-btn:focus,
.btn.quote-btn:active:focus,
.btn.quote-btn.active:focus,
.btn.quote-btn.focus,
.btn.quote-btn:active.focus,
.btn.quote-btn.active.focus,
.btn.twit-btn:focus,
.btn.twit-btn:active:focus,
.btn.twit-btn.active:focus,
.btn.twit-btn.focus,
.btn.twit-btn:active.focus,
.btn.twit-btn.active.focus{
	outline-color: none;
	outline-style: none;
	border-color: #5e1111 #5e1111 hsl(0, 69%, 17%);
}

.btn.quote-btn:hover{
	border-style: none;
}

.btn.quote-btn:active{
	background-image: url("http://www.wtfgamersonly.com/wp-content/uploads/2015/06/Super-Smash-Bros.-img.2.jpg");
	opacity: .8;
}




@media only screen and (max-height: 568px){
	.jumbotron{
		margin-top:-89vh;
	}
}

@media only screen and (min-height: 569px){
	.jumbotron{
		margin-top:-80vh;
	}

	.btn-posit {
		margin-top: -42vh;
	}
}

@media only screen and (min-width: 0px) and (max-width: 1199px){
	.bg{
		background-size: cover;
		background-position: center;
	}
}

/*medium*/

@media only screen and (min-width: 992px) and (max-width: 1199px) { 
	.jumbotron{
		margin-left: 8.33333333%;
	}

}

/*small*/
@media only screen and (min-width: 768px) and (max-width: 991px){
	.jumbotron{
		margin-left: 4.15%;
	}

}

/*xs*/
@media only screen and (min-width: 461px) and (max-width: 767px){
	.jumbotron{
		margin-left: 8.33333333%;
	}

	.btn-posit{
		width: auto;
	}
}

@media only screen and (min-width: 0px) and (max-width: 460px) {
	h2{
		font-size: 22px;
	}

	h3{
		font-size: 18px;
	}

	.btn-posit{
		/*padding-left: 78px; */
		margin-left: 1%;
	}

	.jumbotron{
		margin-left: 8%;
	}

	.twit-btn{
		margin-right: 55px;
		width: auto;
	}

	#twit-text{
		display: none;
	}
}

/*@media only screen and (min-width: 0px) and (max-width: 422px) {
	h2{
		font-size: 22px;
	}

	h3{
		font-size: 18px;
	}

	.twit-btn{
		width: auto;
		margin-right: 10px;
	}

	.btn-posit{
		padding-left: 15%;
	}

	#twit-text{
		display: none;
	}
}*/

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://use.fontawesome.com/5ad62430a6.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<html>
		<head>
		<title>AwesomeDesigns Random Quote Generator</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head> 
<body>
	<div class="bg"></div>
	
	<div class="container">	
		<div class="row">	
			<div class="col-lg-8 col-md-10 col-sm-11 col-xs-10 jumbotron">	
				<h2>"Andrews Random Quote Generator. "</h2>
				<h3>-Andrew Hickman</h3>
			</div>		
		</div>
		
	</div>
	<div class="container">
		<div class="row">
			<div class="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>
	</div>
</html>

Answer 3

添加文本中心类似乎是修复！

xs中的中心引导按钮

3 个答案: