小编Mic*_*lle的帖子

如何在不使用!important的情况下自定义twitter bootstrap的各种输入大小?

Bootstrap的输入大小仅按宽度扩展,而按钮则按高度和字体大小扩展.(见图)我正在尝试自定义输入以扩展高度和字体大小.(注意:他们正在为下一个版本修复此问题,但我太迫不及待了等待)

在此输入图像描述

到目前为止,我只能通过使用!importanthack来覆盖输入css来实现这一点.我想!important不惜一切代价避免使用,因为这是非常糟糕的做法.

目前,这是我扩展高度的代码.input-large.删除时它不起作用!important.我认为这是因为输入被赋予比类更高的优先级(我觉得这绝对是愚蠢的,但如果我错了,请纠正我).

.input-large {
width: 210px;
height: 44px !important;
margin-bottom: 10px !important;
line-height: 30px !important;
padding: 11px 19px !important;
font-size: 17.5px !important;
}
Run Code Online (Sandbox Code Playgroud)

有没有办法在不删除默认输入样式不是声明!important的情况下实现这一点?

这是一个小提琴:http://jsfiddle.net/xryQK/

html css forms twitter-bootstrap

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

Bootstrap 3:导航栏形式的输入组占据整个宽度

所以这就是bootstrap的导航栏形式.

默认HTML是:

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search for awesome stuff">
  </div>
  <button type="submit" class="btn btn-default">Search</button>
</form>
Run Code Online (Sandbox Code Playgroud)

但我想像一个加入输入和按钮一起input-group.但是,当我尝试将输入和按钮包裹起来时input-group,它最终会占据整个宽度:

在此输入图像描述

HTML:

<form class="navbar-form navbar-left" role="search">
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Search for awesome stuff">
    <span class="input-group-btn"><button type="submit" class="btn btn-default">Search</button></span>
  </div>
</form>
Run Code Online (Sandbox Code Playgroud)

我已经为此阅读了一些解决方案,但我想避免使用类似的黑客style: "width: 200px;"

有解决方案吗 非常感谢提前.

html css twitter-bootstrap

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

jQuery colorbox:如何防止加载指示器小框出现在主色盒内容之前?

我正在使用jQuery colorbox来加载登录表单(通过ajax).但是,这个小小的盒子会显示几秒钟,然后它会淡入我想要加载的实际内容中.因此,在网站上观察了几个彩盒示例之后,我有点确定这个小盒子应该是一个预装盒子.有什么方法可以禁止这个盒子完全出现吗?

我已经尝试过愚蠢的事情,例如调整CSS和设置display: none所有加载项目,但它不起作用.

在此输入图像描述

我想避免任何CSS黑客攻击并通过修改javascript来解决这个问题. 理想情况下,装载盒永远不会出现的某种方式,因为我不会使用colorbox来加载需要很长时间的任何东西.

使用我修改过的colorbox javascript和CSS在jsfiddle上重新创建了问题.ajax内容不会在那里加载,但是我想要摆脱的小盒子仍然出现:http://jsfiddle.net/hPEXf/

提前致谢!

javascript jquery colorbox

16
推荐指数
1
解决办法
5299
查看次数

Chrome扩展程序上下文菜单:单击菜单项后如何将div附加到页面

玩弄Chrome扩展程序.目前我已经整理了一个上下文菜单项.单击上下文菜单项时,它将itemClicked()在我的后台脚本中触发context_menu.js:

function itemClicked(info, tab) {
     alert("clicked");
}
Run Code Online (Sandbox Code Playgroud)

警报触发.我也可以做像发送ajax请求之类的东西itemClicked()

但是,我不能将任何元素附加到页面(或任何类型的DOM操作).即使是像这样基本的东西也行不通:

  var d = document.createElement('div');
  d.setAttribute("css", "width: 100px; height: 100px; background-color: red; position: fixed; top: 70px; left: 30px; z-index: 99999999999;");
  document.body.appendChild(d); 
Run Code Online (Sandbox Code Playgroud)

所以我尝试将相同的代码添加到内容脚本中:

chrome.contextMenus.onClicked.addListener(function(OnClickData info, tabs.Tab tab) {
  //code to append the input here
});
Run Code Online (Sandbox Code Playgroud)

但它仍然无法奏效.我究竟做错了什么?

如何在单击后获取上下文菜单以向页面添加内容?

非常感谢!

编辑:这是我的manifest.json(删除了无关的东西,如名称/描述......等)

{


  "permissions": [
    "activeTab",        
    "tabs",
    "cookies",
    "contextMenus"
  ],

  "background": {
    "scripts": ["context_menu.js"]
  },
  "browser_action": {
    "default_icon": "icon16.png",
    "default_css": "popup.css",
    "default_popup": "popup.html"
  },

  "content_scripts": [
    {      
      "matches": ["<all_urls>"],
      "js": ["vendor/jquery-1.8.2.min.js", …
Run Code Online (Sandbox Code Playgroud)

javascript google-chrome google-chrome-extension

10
推荐指数
1
解决办法
6346
查看次数

Firefox word-break在随机点上打破短语

我是break-word一个容器,所以非常长的单词不会溢出.虽然Chrome和Safari处理得非常好,但似乎Firefox和IE喜欢在最荒谬的点上随机打破单词 - 甚至是短语.请参见下面的屏幕截图:

在此输入图像描述

这是我用来防止破解的代码:

.break-word {
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
Run Code Online (Sandbox Code Playgroud)

这是我用于容器和文本的CSS:

.wrap {
position: relative;
text-align: center;
margin: 40px auto 20px;
padding: 50px;
border: 4px double #f7f7f7;
display: block;
}
.quote-text {
font-size: 40px;
line-height: 50px;
font-weight: 400;
}
Run Code Online (Sandbox Code Playgroud)

HTML

   <div class="wrap break-word">
     <div class="row-fluid quotation-marks">&ldquo;&rdquo;</div>
     <span class="quote-text">
       Having a partner definitely allows you to take more risks.
     </span>
     <span class="author">Arianna Huffington</span>
   </div>
Run Code Online (Sandbox Code Playgroud)

为什么会这样?有关如何在所有浏览器中正常使用单词的任何线索?Firefox绝对是一个优先事项.

提前致谢!

html css css3

9
推荐指数
1
解决办法
5299
查看次数

Carrierwave没有上传文件(Rails 4)

我在通过Carrierwave上传文件时遇到问题.我的模型设置为有很多瓶子,每个瓶子可以有多个样本.每个样本都是通过Carrierwave上传的图像.但是,文件根本不保存.我希望它保存到的目录中没有文件显示,并且if @bottle.swatches.any?在视图中调用不显示任何内容.

这是我第一次使用Rails 4,所以我觉得我的错误可能是由于nooby实践(而不是实际的Carrierwave).我看起来遍布堆栈,但我尝试过的都没有工作.我究竟做错了什么?非常感谢提前!

class Swatch < ActiveRecord::Base
  belongs_to :user
  belongs_to :bottle, dependent: :destroy
  mount_uploader :swatch, SwatchUploader

  validates :user_id, presence: true
  validates :bottle_id, presence: true
end

class Bottle < ActiveRecord::Base
  belongs_to :user

  has_many :swatches
  has_many :favorite_bottles
  has_many :favorited_by, through: :favorite_bottles, source: :user

  accepts_nested_attributes_for :swatches
  validates :name, 
    presence: true,
    length:              { in: 1..100 }

end
Run Code Online (Sandbox Code Playgroud)

控制器

class BottlesController < ApplicationController

  def new
    @bottle = Bottle.new
    @bottle.swatches.build
  end

  def create
    @bottle = Bottle.new(bottle_params)

    if @bottle.save
      redirect_to @bottle
    else
      render 'new' …
Run Code Online (Sandbox Code Playgroud)

ruby-on-rails carrierwave ruby-on-rails-4

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

Ruby on Rails:编写迁移以将列移动到另一个表,合并重复项,然后匹配ID

我坚持写这个迁移.

目前我有一个建筑物表.它将建筑物的城市列为一列.

(城市列中有重复的城市名称.)

  create_table "building", force: true do |t|
    t.string   "name"
    t.string   "city"
    t.datetime "created_at"
    t.datetime "updated_at"
  end
Run Code Online (Sandbox Code Playgroud)

我现在已经创建了一个城市模型has_many :buildings.

现在的建筑物belongs_to :city.

我已city_idbelongs_to协会的建筑物添加了一个新列.

  create_table "city", force: true do |t|
    t.string   "name"
    t.datetime "created_at"
    t.datetime "updated_at"
  end
  add_index "city", ["name"], name: "index_cities_on_name", unique: true
Run Code Online (Sandbox Code Playgroud)

我正在尝试编写将执行以下操作的迁移:

1.将"城市"列从建筑物表格复制到城市表格中的"名称"列.

2.合并城市名称列中的所有重复城市

3.将建筑物表格中的"city_id"列与正确的城市相匹配

但我完全被卡住了...我已经在ActiveRecords文档中翻了一个小时了,我现在还不太清楚要做什么.任何帮助将非常感谢!谢谢!

sql activerecord ruby-on-rails database-migration ruby-on-rails-4

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

将current_user传递给表单而不使用隐藏字段(Rails 4)

目前在我的Rails应用程序中,我有用户,样本和瓶子.

样本属于瓶子和提交它的用户.瓶子不属于用户.

class Swatch < ActiveRecord::Base
  mount_uploader :swatch, SwatchUploader
  belongs_to :user
  belongs_to :bottle
end

class Bottle < ActiveRecord::Base
  has_many :swatches
end

class User < ActiveRecord::Base
  has_many :swatches
end
Run Code Online (Sandbox Code Playgroud)

目前,用户可以从瓶子的展示页面上传瓶子的新样本.

这是样本控制器:

class SwatchesController < ApplicationController
   def create
    @bottle = Bottle.find(params[:bottle_id])
    @user = current_user
    @swatch = @bottle.swatches.create(swatch_params)
    redirect_to bottle_path(@bottle)
  end

  private
    def swatch_params
      params.require(:swatch).permit(:swatch, :user_id, :bottle_id)
    end
end
Run Code Online (Sandbox Code Playgroud)

HAML:

= form_for([@bottle, @bottle.swatches.build]) do |f|
    = f.label :swatch
    = f.file_field :swatch
    = f.submit
Run Code Online (Sandbox Code Playgroud)

使用此设置,除非我将当前用户的ID作为隐藏字段传递,否则表单将不起作用.但我知道这是不好的做法,并希望避免这种情况.

所以我的问题是:如何通过控制器传递bottle_id当前用户和当前用户user_id

ruby-on-rails ruby-on-rails-4

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