使用Twitter Bootstrap 3将列居中

作者: 与之
发布时间: 2024-04-01 11:47:41 (16天前)
转自：

12 条回复

0#
回复此人
浮华丶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 试试这个 </p> <pre> <code> <div class="row"> <div class="col-xs-2 col-xs-offset-5"></div> </div> </code> </pre> <P> 你可以使用其他 <code> col </code> 以及喜欢 <code> col-md-2 </code> 等 </p> </DIV>

编辑
1#
回复此人
啦啦啦拉肚子 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 别忘了添加 <code> !important </code> 。然后你可以确定元素真的会在中心： </p> <pre> <code> .col-centered{ float: none !important; margin: 0 auto !important; } </code> </pre> </DIV>

编辑
2#
回复此人
阿政ღ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 对于那些希望将列元素置于屏幕中心的人，当你没有确切的数字来填充你的网格时，我写了一小段JavaScript来返回类名： </p> <pre> <code> function colCalculator(totalNumberOfElements, elementsPerRow, screenSize) { var arrayFill = function (size, content) { return Array.apply(null, Array(size)).map(String.prototype.valueOf, content); }; var elementSize = parseInt(12 / elementsPerRow, 10); var normalClassName = 'col-' + screenSize + '-' + elementSize; var numberOfFittingElements = parseInt(totalNumberOfElements / elementsPerRow, 10) * elementsPerRow; var numberOfRemainingElements = totalNumberOfElements - numberOfFittingElements; var ret = arrayFill(numberOfFittingElements, normalClassName); var remainingSize = 12 - numberOfRemainingElements * elementSize; var remainingLeftSize = parseInt(remainingSize / 2, 10); return ret.concat(arrayFill(numberOfRemainingElements, normalClassName + ' col-' + screenSize + '-push-' + remainingLeftSize)); } </code> </pre> <P> 如果你有5个元素，并且你希望每行有3个元素 <code> md </code> 屏幕，你这样做： </p> <pre> <code> colCalculator(5, 3, 'md') >> ["col-md-4", "col-md-4", "col-md-4", "col-md-4 col-md-push-2", "col-md-4 col-md-push-2"] </code> </pre> <P> 请记住，第二个参数必须可以被12分割。 </p> </DIV>

编辑
3#
回复此人
℘ 宋唐 ℒº ѵ ℯ楚厦 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 要在Bootstrap行中居中多个列 - 并且cols的数量是奇数，只需添加它 <code> css </code> class到该行中的所有列： </p> <pre> <code> .many-cols-centered { // To horizontally center bootstrap odd cols, eg col-lg-9, col-md-3, works well in lg display:inline-block; float:none; } </code> </pre> <P> 所以在你的HTML中你有类似的东西： </p> <pre> <code> <div class="row text-center">  <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered"> <img src='assets/image1.jpg'> <h3>You See</h3> <p>I love coding.</p> </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered"> <img src='assets/image2.jpg'> <h3>You See</h3> <p>I love coding.</p> </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered"> <img src='assets/image3.jpg'> <h3>You See</h3> <p>I love coding.</p> </div> </div> </code> </pre> </DIV>

编辑
4#
回复此人
ikun | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 使用Bootstrap v4，只需添加即可完成 <code> .justify-content-center </code> 到了 <code> .row </code> <code> <div> </code> </p> <pre> <code> <div class="row justify-content-center"> <div class="col-1">centered 1 column</div> </div> </code> </pre> <P> <a href="https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content" rel="noreferrer"> https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content </A> </p> </DIV>

编辑
5#
回复此人
枫 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果将其放在行上，则内部的所有列都将居中： </p> <pre> <code> .row-centered { display: flex; justify-content: space-between; } </code> </pre> </DIV>

编辑
6#
回复此人
浮华丶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> <a href="https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29" rel="noreferrer"> 引导 </A> 版本3有一个.text-center类。 </p> <P> 只需添加此类： </p> <pre> <code> text-center </code> </pre> <P> 它只会加载这种风格： </p> <pre> <code> .text-center { text-align: center; } </code> </pre> <P> 例： </p> <pre> <code> <div class="container-fluid"> <div class="row text-center"> <div class="col-md-12"> Bootstrap 4 is coming.... </div> </div> </div> </code> </pre> </DIV>

编辑
7#
回复此人
哦豁 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这不是我的代码，但它完美地工作（在Bootstrap 3上测试）并且我不必乱用col-offset。 </p> <P> 的<strong> 演示： </强> </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-css lang-css prettyprint-override"> <code> /* centered columns styles */ .col-centered { display: inline-block; float: none; /* inline-block space fix */ margin-right: -4px; background-color: #ccc; border: 1px solid #ddd; } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <div class="container"> <div class="row text-center"> <div class="col-xs-6 col-centered">Column 6</div> <div class="col-xs-6 col-centered">Column 6</div> <div class="col-xs-3 col-centered">Column 3</div> <div class="col-xs-3 col-centered">Column 3</div> <div class="col-xs-3 col-centered">Column 3</div> </div> </div> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
8#
回复此人
坚挺的阿袁 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这可能不是最佳答案，但还有一个更有创意的解决方案。正如koala_dev所指出的，列偏移仅适用于偶数列大小。但是，通过嵌套行，您也可以实现对齐不均匀的列。 </p> <P> 要坚持原始问题，你想在12格的网格中居中一列1。 </p> <OL> <LI> 将一列2对齐，将其偏移5 </LI> <LI> 创建一个嵌套行，这样您就可以在2列中获得新的12列。 </LI> <LI> 由于您希望将列居中于1，并且1是2的“一半”（我们在步骤1中居中），您现在需要在嵌套行中居中6列，这可以通过将其偏移3来轻松完成。 </LI> </醇> <P> 例如： </p> <pre> <code> <div class="container"> <div class="row"> <div class="col-md-offset-5 col-md-2"> <div class="row"> <div class="col-md-offset-3 col-md-6"> centered column with that has an "original width" of 1 col </div> </div> </div> </div> </div> </code> </pre> <P> 看到 <a href="https://jsfiddle.net/L7rczrhh/" rel="noreferrer"> 这个小提琴 </A> ，请注意，你必须增加输出窗口的大小，以便看到结果，否则列将包装。 </p> </DIV>

编辑
9#
回复此人
一生流水 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 因为我从来没有必要只集中一个 <code> .col- </code> 在一个 <code> .row </code> ，我在包装上设置了以下类 <code> .row </code> 我的目标列。 </p> <pre> <code> .col-center > [class*="col-"] { float: none; margin-left: auto; margin-right: auto; } </code> </pre> <P> 例 </p> <pre> <code> <div class="full-container"> <div class="row col-center"> <div class="col-xs-11"> Foo </div> <div class="col-xs-11"> Bar </div> </div> </div> </code> </pre> </DIV>

编辑
10#
回复此人
苞米地里的蒙面妖 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 的<strong> 方法1： </强> </p> <pre> <code> <div class="container"> <div class="row"> <div class="col-md-2 col-md-offset-5"> YOUR CONTENT </div> </div> </div> </code> </pre> <P> 的<strong> 方法2： </强> </p> <P> CSS </p> <pre> <code> .float-center{float: none;} <div class="container"> <div id="mydev" class="center-block float-center" style="width:75%;"> YOUR CONTENT </div> </div> </code> </pre> <P> Bootstrap提示，示例和工具： <a href="https://onaircode.com/category/bootstrap/" rel="nofollow noreferrer"> OnAirCode </A> </p> </DIV>

编辑

登录后才能参与评论