引导响应式两列问题

Question

我正在开发引导框架。我有一个关于引导网格列的查询。在单行中，我需要两列，第一列应该在左边，另一列应该在右边，带有自定义字段。它在 col-lg 上工作得很好，我给了 pull-left 和 pull-right 但是当我为 Responsive 减少它不是单排时它正在下降。

这是我的代码

<div class="container-fluid">
        <div class="row">
            <div class="col-sm-6 pull-left timer">
                Timer
            </div>
            <div class="col-sm-6 pull-right timer">
                Timer
            </div>
        </div>
    </div>

这是我正在使用的 css 参考样式

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css">

.timer{
background-color: #e2e2e2;
border: 1px solid #a1a1a1;
padding: 10px 40px; 
text-align: center;
vertical-align: middle;
margin: 5px;
clear: both;
width:70px;
height:15px;
border-radius: 15px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
white-space: nowrap;

}

请在我做错的地方帮助我

谢谢 马哈迪文

Answer 1

尝试先移除 pull-left 和 pull-right。确保您没有任何其他 CSS 干扰您的布局。

看起来 CSS 类 .timer 也没有实际应用于任何东西，仅供参考。

Answer 2

您的响应式布局代码错误

<div class="container-fluid">
        <div class="row">
            <div class="col-sm-12 col-md-6">
                Timer
            </div>
            <div class="col-sm-12 col-md-6">
                Timer
            </div>
        </div>
    </div>

而且我建议你不要使用班级计时器，因为这是问题开始的地方，col-sm-* 班级用于小屏幕，因此它仅适用于手机，以便在大屏幕中进行布局你可以使用col-md-*

您可以在bootstrap docs找到更多信息

或者你可以使用这个在线找到的工具来制作bootstrap grids