Question

我使用bootstrap-sass gem安装了Twitter Bootstrap 3，就像我在所有项目中一样。但是，在此项目中，断点被错误地调用。我无法确切地知道它为我的屏幕呈现的分辨率，但这是错误的。我必须自定义将断点设置为较小的值才能使其工作。我使用的标准结构如下：

在我的application.html.haml

中

!!!
/ paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
/[if lt IE 7 ] <html class="ie6" lang="en">
/[if IE 7 ] <html class="ie7" lang="en">
/[if IE 8 ] <html class="ie8" lang="en">
/ [if (gte IE 9)|!(IE)]><!

%html{:lang => "en"}
  / <![endif]

  %head
    %meta{:charset => "utf-8"}/
    / Uncomment to make IE8 render like IE7
    / <meta http-equiv="X-UA-Compatible" content="IE=7" />
    / Set the viewport width to device width for mobile
    %meta{:content => "width=device-width, initial-scale=1.0", :name => "viewport"}/
    %title= full_title(yield(:title))
    = stylesheet_link_tag "application", 'http://fonts.googleapis.com/css?family=Lato:300|Grand+Hotel'
    = csrf_meta_tags


  / |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||


  %body
    .navigation
      = render 'layouts/nav'
    .wrapper
      .flash
        - flash.each do |key, value|
          %div{:class => "alert-box alert-#{key}"}= value
      = yield
      = javascript_include_tag "application"
    .footer
      / = render 'layouts/footer'
      = debug(params) if Rails.env.development?

然后我调用每个特定页面上的bootstrap类（因为我想使用完整背景和偏移的文本），如下所示：

home.html.haml

#textbox
    .row
        .col-xs-12.col-sm-12.col-md-10.col-lg-10.col-md-offset-1.col-lg-offset-1
             content goes here

您可以使用此工具将我的haml转换为erb：http://www.haml-converter.com/。除此之外，我真的不知道该怎么做。也许是因为我使用@import“bootstrap”调用bootstrap;在application.css.scss中？我尝试使用* = require来做这件事，但我被警告不要在git repo上这样做。此外，当我这样做时，谷歌字体没有被加载。最后，提一下当我最初创建项目时，我遇到了自助问题，其中.row在窗口的最大宽度上流过每边约15px。我通过将.row的左右边距设置为0来修复此问题。

提前感谢您的帮助，并祝您一切顺利！

Answer 1

Bootstrap使用了一个很棒的GRID SYSTEM，它构成了应用程序的主干。如果你使用bootstrap然后它必须阅读!!参考这些

http://getbootstrap.com/css/#grid

http://blog.jetstrap.com/2013/08/bootstrap-3-grids-explained/

Bootstrap 3.0 Grid Explanation

请删除每行前面不需要的/。我认为你使用在线转换器将初始erb代码转换为haml，这就是为什么所有这些都出现了。

在HAML中，缩进就是一切。你可以浏览这里的文档

http://haml.info/docs.html

请务必先清除欠压缩的代码，否则有人会帮助您。

Bootstrap 3显示错误的断点

1 个答案: