Bootstrap 是一个流行的 CSS 框架，被广泛应用于前端开发中。但是，由于其默认使用左对齐排版，与某些阿拉伯语、希伯来语等从右往左书写的语言不兼容。为了解决这个问题，社区推出了 bootstrap_rtl 这个 npm 包。本文将介绍如何使用 bootstrap_rtl。
安装
执行以下命令来安装 bootstrap_rtl：
npm install bootstrap_rtl
引用
在 HTML 中引入 bootstrap_rtl：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------------------------------------------------- ------- ------ --- ------- ----------------------------------------------------------- ------- -------
栅格布局
在 bootstrap 中，栅格布局是非常重要的。它提供了一种方便的方式来实现响应式布局。但是，在从右往左的语言中，栅格布局的处理方式有所不同。
栅格系统
我们可以通过 .row 和 .col-* 类来实现栅格布局。.row 用来创建一个新的行，.col-* 用来指定列宽。例如：
<div class="row"> <div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div> <div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div> <div class="clearfix visible-sm-block"></div> <div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div> <div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div> </div>
但是，如果我们希望从右往左排列呢？在 bootstrap_rtl 中，我们可以通过使用 .row-reverse 类来实现：
<div class="row row-reverse"> <div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div> <div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div> <div class="clearfix visible-sm-block"></div> <div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div> <div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div> </div>
栅格偏移
我们可以通过使用 .col-*-offset-* 类来实现栅格偏移。例如：
<div class="row"> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div>
同样地，如果我们希望从右往左排列，我们可以使用 .col-*-offset-* 类，并将偏移的方向设置为向右。例如：
<div class="row row-reverse"> <div class="col-md-4 col-md-offset-4 col-md-offset-right-4">.col-md-4 .col-md-offset-4 .col-md-offset-right-4</div> </div>
RTL 补丁
除了栅格布局以外，bootstrap_rtl 还为一些组件提供了 RTL 补丁，以便它们在从右往左的语言中能够正确地工作。这些组件包括导航栏、面包屑、分页器等等。
例如，我们可以使用 .navbar-rtl 类来将导航栏从左对齐变为右对齐：
<nav class="navbar navbar-default navbar-rtl"> ... </nav>
结语
本文介绍了如何使用 npm 包 bootstrap_rtl 来创建从右往左的页面。除了栅格布局以外，bootstrap_rtl 还提供了许多其它功能，例如 RTL 补丁等。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005661481e8991b448e1f55