小编Ric*_*wis的帖子

使用Twitter Bootstrap将页脚粘贴到页面底部

我有一些网页内容不多,页脚位于页面中间,但我希望它位于底部.

我已将所有页面都放在"持有者"中

#holder {
  min-height: 100%;
  position:relative;
}
Run Code Online (Sandbox Code Playgroud)

然后使用以下CSS作为我的页脚

ul.footer {
  margin-top: 10px;
  text-align: center;
}

ul.footer li {
  color: #333;
  display: inline-block;
}

#footer {
  bottom: -50px;
  height: 50px;
  left: 0;
  position: absolute;
  right: 0;
}
Run Code Online (Sandbox Code Playgroud)

我的页脚的HTML

<div class="container">
  <div class="row">
    <div class="span12">
      <div id="footer">
        <ul class="footer">
          <li>Website built by <a href="#">Fishplate</a></li>&nbsp;&nbsp;
          <li>Email:exampleemail@gmail.com</li>
        </ul>
      </div>
    </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

我想保持页脚流畅.

css twitter-bootstrap

71
推荐指数
6
解决办法
19万
查看次数

从左到右填充背景颜色CSS

今天玩一些css3,主要是过渡.

我想要实现的是,在悬停一个li元素时,背景将从左到右填充不同的颜色,理想情况下我希望能够填充一半或一直..我已经开始了一个jsfiddle

我需要使用该属性吗?

-vendor-prefix transition 
Run Code Online (Sandbox Code Playgroud)

请问有谁可以给​​我一些指示.

谢谢

css css3

44
推荐指数
2
解决办法
11万
查看次数

在Rails 3和4中实现"添加到收藏夹"

我正在构建一个应用程序,用户可以在其中创建食谱,查看所有创建的食谱,在成员区域中查看自己的食谱,最后我希望用户在其帐户中添加"收藏夹".

我是Rails的新手但阅读了文档,这是我对后端应该是什么样子的理解.有人可以确认这看起来正确或建议任何错误,并解释我是否做错了(可能是这种情况)?

所以这是我的代码:

用户模型

has_many :recipes
has_many_favorites, :through => :recipes
Run Code Online (Sandbox Code Playgroud)

食谱模型

belongs_to :user
has_many :ingredients #created seperate db for ingredients
has_many :prepererations #created seperate db for prep steps
Run Code Online (Sandbox Code Playgroud)

喜欢的模特

belongs_to :user
has_many :recipes, :through => :user
#this model has one column for the FK, :user_id
Run Code Online (Sandbox Code Playgroud)

收藏控制器

def create
  @favrecipes =current_user.favorites.create(params[:user_id])
end
Run Code Online (Sandbox Code Playgroud)

然后我想要一个按钮发布到数据库,所以我有这个:

<%= button_to("Add to Favorites" :action => "create", :controller => "favorites" %>
Run Code Online (Sandbox Code Playgroud)

我想我可能在路线上遗漏了一些东西,但我不确定.

ruby-on-rails-3

29
推荐指数
1
解决办法
9489
查看次数

Bootstrap模式在iPhone上不起作用

我在我的网站上使用Bootstrap模式对话框(在桌面上工作正常).当我尝试在iPhone和iPad上使用此功能时,模态不起作用.

是否有一个原因?有没有人在使用Bootstrap的CSS时提出修复方法@import

我使用Bootstrap覆盖文件来更改Bootstrap CSS.

css twitter-bootstrap

24
推荐指数
4
解决办法
3万
查看次数

修改twitter bootstrap导航栏

我一直试图修改twitter bootstrap导航栏,此刻所有链接都对齐到左边,当我真正想要的是将它们放在中心位置时.

在另一篇文章中我读到你使用它

.tabs, .pills {
  margin: 0 auto;
  padding: 0;
  width: 100px;
}
Run Code Online (Sandbox Code Playgroud)

但这对我不起作用

我需要在css中更改以实现此目的,我理解我将修改后的CSS放在引导程序中并覆盖.

任何帮助赞赏

这是我的标记

布局/应用

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </a>

    <a class="brand">Newbridges</a>  

  <% if user_signed_in? %>
    <div class="nav-collapse">
      <ul class="nav ">
      <%= render "shared/navbarlogin" %>
    </div>

    <% else%>
    <div class="nav-collapse">
      <ul class="nav">

      <%= render "shared/navbar" %>
    </div>
    <% end %>
Run Code Online (Sandbox Code Playgroud)

我也试过这个

.nav > li {
  float: none;
  display: inline-block;
  *display: inline;
  /* …
Run Code Online (Sandbox Code Playgroud)

css ruby-on-rails twitter-bootstrap

22
推荐指数
1
解决办法
6万
查看次数

成功调用ajax后重新初始化Slick js

I am using Slick for a carousel implementation and everything works fine when the pages loads.What I am trying to achieve is that when i make an Ajax call to retrieve new data I still want the slick carousel implementation, at the moment i lose it.

I have put the call for slick into a function

function slickCarousel() {
  $('.skills_section').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1
  });
}
Run Code Online (Sandbox Code Playgroud)

and then I call the function within my success callback

$.ajax({
    type: …
Run Code Online (Sandbox Code Playgroud)

javascript ajax jquery slick.js

19
推荐指数
5
解决办法
9万
查看次数

Twitter Bootstrap容器

我一直在使用bootstrap几个月,我希望澄清一些事情作为最佳实践的一部分.

我的问题是我是为每一行创建一个容器,还是为整个页面创建一个大容器.

例1(封闭容器)

<div class="container">
    <div class="row">
        <div class="span8 offest2">
            <h1>Content</h1>
        </div>
    </div>
</div>


<div class="container">
    <div class="row">
        <div class="span8 offest2">
            <h1>More Content</h1>
        </div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

例2(1个大容器)

<div class="container">

    <div class="row">
        <div class="span8 offest2">
            <h1>Content</h1>
        </div>
    </div>

    <div class="row">
        <div class="span8 offest2">
            <h1>Content</h1>
        </div>
    </div>

</div>
Run Code Online (Sandbox Code Playgroud)

任何帮助表示赞赏,只是不想早点养成坏习惯

html containers twitter-bootstrap

17
推荐指数
2
解决办法
2万
查看次数

使用Google Maps API点击地图后启用滚轮缩放功能

我正在使用Google Maps API,并希望能够在移动设备上滚动浏览地图,而不是在使用滚轮向下滚动网页时缩放地图.

这是我的代码:

var mapOptions = {
  center: new google.maps.LatLng(51.605139, -2.918567),
  zoom: 15,
  scrollwheel: false,
  draggable: false,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
Run Code Online (Sandbox Code Playgroud)

这很好,但我想要实现的是仅在单击地图时启用滚轮缩放.

(所以在网页上,当我点击地图,我可以放大它或移动设备时,当我点击屏幕时,我可以捏合并缩放/拖动地图.)

我是否可以添加事件监听器以仅在双击或单击时激活可拖动?
是否可以使用API​​?


编辑

我尝试了以下代码,但它似乎不起作用:

google.maps.event.addListener(map, 'click', function (event) {
  var mapOptions = {
    draggable: true,

  };
});
Run Code Online (Sandbox Code Playgroud)

javascript google-maps dom-events

14
推荐指数
3
解决办法
2万
查看次数

环境变量本地和Heroku

我有一个sinatra应用程序,其中我有一个yml文件来设置环境变量,我用这个方法调用它们

module MyConfig

 def config
  environment = ENV["RACK_ENV"] || "development"
  YAML.load_file("./config/config.yml")[environment]
 end
 end
Run Code Online (Sandbox Code Playgroud)

因此,当我想使用变量时,我会这样做

aws_access_key_id = config['aws_access_key']
Run Code Online (Sandbox Code Playgroud)

我有一个.gitignore文件,当推送到github时忽略了config.yml.例如,当我推送到heroku时,这些环境变量将无法访问?

所以这让我使用heroku方式设置它们就像这样

heroku config:add aws_access_key= myapikey
Run Code Online (Sandbox Code Playgroud)

但是heroku访问这些就像

aws_access_key_id = ENV['aws_access_key']
Run Code Online (Sandbox Code Playgroud)

如何设置我的开发环境以使用方法配置和heroku使用ENV,我是否以错误的方式看待这个?或者我的配置方法是否为我这样做?

任何帮助赞赏

Rake文件

  require 'active_support/core_ext'
  require './config/config.rb'
  require 'bundler/setup'
  Bundler.require(:default)

   include MyConfig

  AssetSync.configure do |con|
  con.fog_provider = 'AWS'
  con.fog_region = 'eu-west-1'
  con.fog_directory = config['fog_directory']
  con.aws_access_key_id = config['aws_access_key']
  con.aws_secret_access_key = config['aws_secret_key']
  con.prefix = "assets"
  con.public_path = Pathname("./public")
  end

 namespace :assets do
 desc "Precompile assets"
 task :precompile do
  AssetSync.sync
 end
end
Run Code Online (Sandbox Code Playgroud)

heroku environment-variables sinatra gitignore foreman

14
推荐指数
2
解决办法
1万
查看次数

如何在ajax调用后重新初始化Owl Carousel

我试图在成功的ajax调用后重新初始化owl carousel.ajax调用将更改数据,但视图应保持不变.我遇到的问题是视图(轮播结构)不会重新初始化.页面加载时一切正常.

即时通讯使用1.3.3版

$(document).ready(function() {
 $(".owl-carousel").owlCarousel({
   items : 3
 });
});
Run Code Online (Sandbox Code Playgroud)

Ajax调用

$.ajax({
    type: 'get',
    url: '/public/index',
    dataType: 'script',
    data: data_send,
      success: function(data) {
       $(".owl-carousel").owlCarousel({
         items: 3
       });
      }
   });
}
Run Code Online (Sandbox Code Playgroud)

我错过了我需要做的事情.我在github页面上看过这个问题并尝试了这些建议,但无济于事.

任何帮助赞赏

编辑

根据给出的建议,我创造了这两个功能

function owlCarousel() {
  var owl = $(".owl-carousel"); 
  //init carousel
  owl.owlCarousel();
    owl.data('owlCarousel').reinit({
     items : 3
    });
}

function destroyOwlCarousel() {
  var owl = $(".owl-carousel");
  //init carousel
  owl.owlCarousel();
    owl.data('owlCarousel').destroy();
  }
}
Run Code Online (Sandbox Code Playgroud)

它似乎工作,但想知道这是否是这样做的正确方法?

javascript ajax jquery owl-carousel

14
推荐指数
2
解决办法
3万
查看次数