使用带有导轨的 twitter bootstrap 时按钮没有重新调整大小答案

【问题标题】：Button not getting re-sized while using twitter bootstrap with rails使用带有导轨的 twitter bootstrap 时按钮没有重新调整大小
【发布时间】：2014-02-17 23:11:50
【问题描述】：

我正在使用 Ruby on Rails 版本 4 和 Twitter bootstrap 2 来制作 Web 应用程序。

我使用 button_to 创建了一个按钮，单击该按钮会将用户带到另一个页面。但是，样式 css 没有正确应用。圆形边框显示准确，文本为粗体等。但当我调整浏览器窗口大小时，按钮不会自动调整大小。按钮的宽度保持不变。

但是，当我替换时

<%= button_to 'Start Learning', tut,  :method => :get  ,:class => 'btn btn-default' %>

与

<button class='btn-default'>Start Learning</button>

显示完美，按钮宽度自动调整大小。

我是否错误地使用了 button_to ？

index.html.erb 的完整内容：

<script>

</script>
<body style="background-color:#DDD4BC">
<h1 align="center" style="background-color:#005B9A"><font color="#fff">Tutorials</font></h1>
<br><br>
<style type="text/css">
    .span4,.span1,.span3,.span5{
        height: 200px;
        border-spacing: 0;
        padding: 5px;
        font-weight:bold;
    background-color: #Fff;
    color: #000;
        text-align: center;
        margin-left: 60px;
        margin-right: 60px;
        margin-bottom: 25px;
        border-radius:25px;
        position:relative;



    }
        .title{
            background-color: #005B9A;
            height: 40px;
            line-height:40px;
            color: #fff;
            font-size: 20px;
            padding: 5px;
            border-top-left-radius: 25px;

            border-top-right-radius: 25px;
            text-transform: uppercase;
            font-weight:bold;
            vertical-align:middle;


        }
                              .btn-default{
                                  position: absolute;

                                  bottom:   5px;
                                  top: 80%;
                                  text-transform: uppercase;
                                  font-weight:bold;
                                  display: block;
                                             width: 98%;
                                  border-bottom-left-radius: 25px;
                                  vertical-align:middle;
                                  border-bottom-right-radius: 25px;
                              }


</style>
<div class="container">
  <div class="row">

    <% @tuts.each do |tut| %>
        <div class="span3">

           <div class="title"><%= tut.title %><br></div>
          <%= tut.tut_desc %>        <br>
          <%= link_to 'Show', tut %>
          <%= link_to 'Edit', edit_tut_path(tut) %>
          <%= link_to 'Destroy', tut, method: :delete, data: { confirm: 'Are you sure?' } %><br>
            <%= button_to 'Start Learning', tut,  :method => :get  ,:class => 'btn btn-default' %>

        </div>
    <% end %>
  </div>
  </div>


<br>

<%= link_to 'New Tut', new_tut_path %>
  </body>
  <!-- background-image:url('/assets/blacktexture.jpg') ;   -->

【问题讨论】：

标签： html css ruby-on-rails twitter-bootstrap twitter-bootstrap-2

【解决方案1】：

因为 Rails button_to 创建了一个表单，而不是一个按钮 check out their documentation

您可以使用 link_to 方法并指定类：“btn btn-primary”（这在引导程序 3 中有效，不确定它在 v2 中是如何定义的）

【讨论】：