Button not getting re-sized while using twitter bootstrap with rails

StackOverflow https://stackoverflow.com/questions/21821818

문제

I am using Ruby on Rails version 4 with Twitter bootstrap 2 to make a web application.

I have used button_to to create a button that on clicking takes the user to another page. However,the styling css doesn't get applied on it correctly. The rounded borders are displayed accurately,the text is bold etc. but the button does not automatically resize itself when I resize the browser window.The width of the button remains static.

however, when I replace

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

with

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

it is displayed perfectly,the button width gets automatically resized.

Am I using button_to incorrectly ?

Complete content of 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') ;   -->
도움이 되었습니까?

해결책

Because Rails button_to created a form, not a button check out their documentation

You can use the link_to method and specify the class: "btn btn-primary" (this works in bootstrap 3, not sure how it is defined in v2)

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top