Question

在折叠到移动视图时，我在引导列居中时遇到了一些麻烦;

(defn group [ks coll]
  (group-recur ks coll ks [] {}))

(defn- group-recur [ks coll recur-keys path acc]
  (if (empty? coll)
    acc
    (if (empty? recur-keys)
      (recur ks (rest coll) ks [] (assoc-in acc path (first coll)))
      (let [node (first coll)
            rk   (first recur-keys)
            k    (select-keys node [rk])
            p    (conj path k)]
        (recur ks coll (rest recur-keys) p acc)))))

我正在使用类似于此的代码，当我进入chrome检查元素并单击移动按钮并折叠视图时，第一列将位于第二列的顶部但不会居中在页面的中间位置我想要的是。你有什么想法我会解决这个问题吗？

Answer 1

你可以使用Bootstrap＆＃39;偏移类，因此它不需要更改标记，也不需要额外的CSS。关键是将偏移量设置为等于行剩余大小的一半。您使用的是均匀的列宽，因此可以使用。以下是Bootstrap偏移的链接：http://getbootstrap.com/css/#grid-offsetting

特别是对于移动设备，您可以更改不同尺寸设备的列宽。您只在示例中指定了md。见：http://getbootstrap.com/css/#grid-example-mixed-complete。偏移列和设备大小的组合将为您提供所需的功能。

Answer 2

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>



 <div class="container">
 <div class="row">
 <div class="col-lg-2 col-xs-offset-2">
        <h1>Some Text</h1>
        <img src="http://via.placeholder.com/200x100">
    </div>
    <div class="col-lg-4">
        <h2>more text here</h2>
    </div>
 
 
 </div>
 </div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

以下是jsfiddle

将Bootstrap列垂直对齐时使其居中

2 个答案: