Html 引导响应双栏问题

我正在研究引导框架。我有一个关于引导网格列的查询。在单行中，我需要两列，一列在左侧，另一列在右侧，带有自定义字段。它在lg柱上工作得很好，我会向左拉和向右拉，但当我减少反应时，它并不是一排下来的

这是我的密码

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

.计时器{
背景色：#E2；
边框：1px实心#A1A1；
填充：10px 40px；
文本对齐：居中；
垂直对齐：中间对齐；
保证金：5px；
明确：两者皆有；
宽度：70px；
高度：15px；
边界半径：15px；
字体系列：“源Sans-Pro”，无衬线；
字体大小：16px；
空白：nowrap；

}

请帮助我哪里做错了

谢谢

---

Mahadevan

尝试移除左拉和右拉。确保没有任何其他CSS干扰您的布局

---

看起来不像CSS类。timer实际上也应用于任何东西，仅供参考。

您的响应布局代码是错误的

<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 responsive，我想创建两个自定义元素，比如圆角，一个在左边，另一个应该在页面的右边，当我将页面缩小到移动时，它必须显示正确的外观和感觉。