Question

我正在尝试使用网格选项pull and push，但它们似乎不起作用。我认为它来自我的bootstrap css和/或js的集成（不确定推/拉是通过js还是CSS完成的）。

我添加了一个应该在我的网页顶部工作的推拉：

<div class="row">
<div class="col-md-9 col-md-push-3">Should be on the right</div>
<div class="col-md-3 col-md-pull-9">Should be on the left</div>
</div>

在此网址： http://www.dylog.test.resamarket.com/clients/connexion

我不知道为什么它不起作用，我不知道从哪里开始调查。

Answer 1

推/拉类的使用不正确。

格式为：

[push|pull]-[viewport size]-[column count]。

我已突出显示其中一列，以便您更轻松地查看交换。

＆＃13;

.col-md-9.push-md-3 {
  background-color: #fc0;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-9 push-md-3">.col-md-9 .push-md-3</div>
    <div class="col-md-3 pull-md-9">.col-md-3 .pull-md-9</div>
  </div>
</div>

＆＃13;

Answer 2

我看到您使用的是bootstrap 4.0 alpha的下载版本。如果我添加该行：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

在<title>标记之后以及您的通话之上，它运作正常。不知道为什么它会这样做，因为文件似乎很好。我建议尝试使用Bootstrap的生产版本。

col swap http://webdevpdx.com/soverflow/col-swap.png

Bootstrap推拉选项似乎不起作用

2 个答案: