Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >form_tag无法对齐按钮和输入框- rails 4引导程序

问form_tag无法对齐按钮和输入框- rails 4引导程序
EN

Stack Overflow用户

提问于 2015-04-06 00:42:12

回答 2查看 708关注 0票数 1

我一直在尝试对齐我的按钮和表单输入标签，但是如果我使用普通的HTML表单进行引导，似乎什么都不起作用。

<div class="input-group">
   <input type="text" class="form-control">
   <span class="input-group-btn">
      <button class="btn btn-primary" type="button">Go!</button>
   </span>
</div>

我得到了一个对齐的输入框和按钮，但是当我在我的erb中使用form_tag帮助器和以下内容时；

<%= form_tag search_nut_databases_path, :class => "form-inline", method: :get do %>
<div class="input-group">
  <%= text_field_tag :search, params[:search], class: "form-control",  :placeholder => "search database" %>
   <span class="input-group-btn">
     <%= submit_tag 'submit', class: "btn btn-primary" %>
 </span>
 </div>
<% end %>

我收到一个未对齐的框，我已经检查了css，应该没有任何东西会影响它

谢谢

twitter-bootstrap

EN

回答 2

Stack Overflow用户

发布于 2015-04-06 07:47:22

将您的代码封装到窗体组类中..像下面这样

<div class="form-group">
 <div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-btn">
       <button class="btn btn-primary" type="button">Go!</button>
    </span>
 </div>
</div>

票数 0

EN

Stack Overflow用户

发布于 2015-08-17 08:17:04

我不知道你是否能够解决这个问题，但我也有类似的问题，并且能够正确地对齐。

下面是我尝试修改的代码片段

<%= form_tag(search_nut_databases_path, :method => "get", id: "search-form", :class => "form-inline") do %>
        <div class="input-group">
         <%= text_field_tag :search, params[:search], :class => "form-control", placeholder: "search database" %>
        </div>
        <!--This actually works for the button-->
        <%= button_tag(type: 'submit', class: "btn btn-default") do %>
                <i class="icon-ok icon-white"></i> Search
        <% end %>
<% end %>

我仍然面临的唯一问题是自定义表单的大小，因为当存在“text_field_tag - =>”时，不会触发:class表单的'input-large‘。

但是，我希望这段代码能对您有所帮助。

Aks

票数 0

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29463915

复制

相关文章

Rails MVC 和 CRUD(4)

api action route 日志

结果展示了当前的一系列 Restfull API 与 Controller#Action 的对应关系

franket

2021/11/24

4050

Ruby On Rails 4 hello world,Ruby On Rails上手

ruby on rails ruby java django

有机会再试一试Rails了，仅仅是原来接触的是2，如今已然变成了4，似乎如今的安装比原来会快些。。

全栈程序员站长

2022/07/12

2.5K0

Ruby On Rails 4 hello world,Ruby On Rails上手

Ruby on Rails 基础（4）

安装Rails 检查环境检查以下三个软件，确保已经安装 [root@h202 ruby]# ruby -v ruby 2.3.0p0 (2015-12-25 revision 53290) [x86_64-linux] [root@h202 ruby]# gem -v 2.5.1 [root@h202 ruby]# sqlite3 --version 3.6.20 [root@h202 ruby]# ---- 替换安装源如果不替换源，会很慢，或者根本没法获取包，因为有墙 [root@h202 rub

franket

2021/11/25

1.2K0

Rails 容器与配置(4)

这个 ONBUILD 镜像可以用于大部分的Rails应用，它会完成类似如下的一些工作：

franket

2021/10/20

9470

jQuery点击按钮，生成input输入框

需求，点击添加按钮，生成input输入框，如果上一个输入框为空，则弹出提示框提示，若不为空，则生成一行input框。

王小婷

2019/04/17

6.7K0

jQuery点击按钮，生成input输入框

富文本框_html表单输入框对齐

https java actionscript 网络安全 html

<tr id=”illegal”> <th></th> <td colspan=”3″ style=”width:85%”> <textarea id=”illegaleditor” name=”report.illegal” style=”width:98%;height:250px;”> </textarea> </td> </tr>

全栈程序员站长

2022/09/20

4.4K0

Bootstrap Table含有按钮时表格不对齐

bootstrap settimeout table 表格

使用Bootstrap Table的时候，在含有按钮的情况，有时候表格的线垂直方向上不对齐

tianyawhl

2019/09/24

1.3K0

Rails 构建评论功能（4）

生成控制器 [root@h202 blog]# rails generate controller Comments Running via Spring preloader in process 3855 create app/controllers/comments_controller.rb invoke erb create app/views/comments invoke test_unit create test/c

franket

2021/10/20

3460

UE4新手引导之下载和安装虚幻4游戏引擎

游戏 https html

1) 进入虚幻4的官方主页（https://www.unrealengine.com/）这里你可以获得关于虚幻4的最新资讯，包括版本更新、博客更新、新闻和商城等。自2015年起，该引擎已经提供免费下载的服务。除了UE4的官网主页，我也推荐你收藏如下网站：英文文档：https://docs.unrealengine.com/latest/INT/ 中文文档（未翻译完全）：https://docs.unrealengine.com/latest/CHN/index.html UE4的论

用户1198337

2018/01/19

2.9K0

UE4新手引导之下载和安装虚幻4游戏引擎

Rails MVC 和 CRUD(12)

edit model title 基础

保存成功就直接显示，如果保存失败，就重绘 new 页面，new 页面中加入了对错误信息的显示

franket

2021/11/25

2550

Rails MVC 和 CRUD(2)

mvc 编程算法数据库 sql

MVC 分块设计有助于管理复杂的应用程序，因为可以在一段时间内只用关注一个方面；例如，可以在不依赖业务逻辑的情况下专注于视图设计；同时也让应用程序的测试更加容易；MVC 分层同时也简化了分组开发；不同的开发人员可同时开发视图、控制器逻辑和业务逻辑

franket

2021/11/24

3750

Rails MVC 和 CRUD(5)

创建了一个叫 ArticlesController 的类，继承自 ApplicationController

franket

2021/11/24

3390

Rails MVC 和 CRUD(7)

(这里的 /articles 明明对应两个方法，GET、POST ，有点不太明白，为什么这样指定就一定成了POST请求)

franket

2021/11/24

1960

Rails MVC 和 CRUD(9)

保存数据修改 create 方法，对提交的数据进行保存 [root@h202 blog]# vim app/controllers/articles_controller.rb [root@h202 blog]# cat app/controllers/articles_controller.rb class ArticlesController < ApplicationController def new end def create # render plain: params

franket

2021/11/25

1900

Rails MVC 和 CRUD(15)

ruby html ruby on rails grep 数据库

点击【Destroy】后会根据我们的定义弹出提示连续删除几次后所剩无几目前已经通过 Rails 实现了文章的新建、显示、列出、更新、删除操作 ---- 命令汇总 rails server -b 0.0.0.0 rails generate controller welcome index cat app/views/welcome/index.html.erb vim config/routes.rb grep -v " #" config/routes.rb | grep -v

franket

2021/11/25

3490

Rails MVC 和 CRUD(13)

定义 update 方法，并且添加 edit 链接和 show 链接 [root@h202 blog]# vim app/controllers/articles_controller.rb [root@h202 blog]# cat app/controllers/articles_controller.rb class ArticlesController < ApplicationController def new @article = Article.new end def

franket

2021/11/25

1620

Rails MVC 和 CRUD(3)

要在 Rails 中显示“My first test” 的静态页面，需要新建一个控制器和视图

franket

2021/11/24

7150

Rails MVC 和 CRUD(8)

数据库数据结构迁移 model 继承

再次提交一回 ---- 创建模型 Rails 提供了一个生成器用来创建模型 [root@h202 blog]# bin/rails generate model Article title:string text:text Running via Spring preloader in process 13216 invoke active_record create db/migrate/20160422140912_create_articles.rb c

franket

2021/11/25

2570

Rails MVC 和 CRUD(1)

ruby on rails mvc ruby

Rails 的相关基础，详细可以参考官方文档和 Ruby China 的 Rails 入门

franket

2021/11/24

3480

Rails MVC 和 CRUD(10)

再次加载可以成功显示了 ---- 列出所有文章 [root@h202 blog]# vim app/controllers/articles_controller.rb [root@h202 blog]# cat app/controllers/articles_controller.rb class ArticlesController < ApplicationController def new end def create # render plain: params[:ar

franket

2021/11/25

1820

相似问题

引导4，无法向右对齐按钮

12

引导程序无法使用Rails 4。

25

rails 4，form_tag作为引导3输入组

11

Rails 5+引导带4按钮对齐/位置问题

11

引导程序4:按钮将文本与图标对齐

30

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例