Question

我正在研究bootstrap框架。我有一个关于bootstrap网格列的查询。在单行中我需要两列第一列应该在左边，其他列应该在右边有自定义字段。它完全在col-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;

}

请在我做错的地方帮助我

由于马哈德

Answer 1

首先尝试移除左拉和右拉。确保没有任何其他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

bootstrap响应两列问题

2 个答案: