Bootstrap行边距

时间:2016-10-09 12:41:30

标签: css twitter-bootstrap twitter-bootstrap-3

当我减小屏幕尺寸时,其中一个按钮被推到下一行。我希望至少有两个人在一起。我尝试使用" 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>

1 个答案:

答案 0 :(得分:0)

即使在您的更新之后,您的代码也不完整,但尝试使用媒体查询,而不仅仅是列和Bootstrap的默认样式。

input = Int(txtAnswerFieldOUTLET.text!)