当我减小屏幕尺寸时,其中一个按钮被推到下一行。我希望至少有两个人在一起。我尝试使用" col" ,但在大屏幕尺寸上,它会增加按钮之间的左右边距
<!--BANNER-->
<div class="container-fluid" id="banner">
<!--MAIN BUTTONS SECTION-->
<div class="row button-container">
<button class="icon icon-me">
<img class="img-responsive" src="img/PNG/256 px/cabin.png">
<div class="button-overlay">
<h1>Myself</h1>
</div>
</button>
<button class="icon icon-work">
<img class="img-responsive" src="img/PNG/256 px/Wallet.png">
<div class="button-overlay">
<h1>Work</h1>
</div>
</button>
<button class="icon icon-goal">
<img class="img-responsive" src="img/PNG/256 px/Tent.png">
<div class="button-overlay">
<h1>Goal</h1>
</div>
</button>
<button class="icon icon-message">
<img class="img-responsive" src="img/PNG/256 px/Pencil.png">
<div class="button-overlay">
<h1>Message</h1>
</div>
</button>
</div>
</div>
答案 0 :(得分:0)
即使在您的更新之后,您的代码也不完整,但尝试使用媒体查询,而不仅仅是列和Bootstrap的默认样式。
input = Int(txtAnswerFieldOUTLET.text!)