css - 更改 div 中 Bootstrap 按钮的大小

Question

我在我的代码中使用 Bootstrap 按钮。但是，我想更改特定 div 中的某些按钮。应该更小

 <div class="well">
  <div class="bookmark">

  <% @bookmarks.each do |bookmark| %>
   <p>  
   <%= link_to bookmark.url %>
  #these should be smaller
  <%= link_to "Edit bookmark", edit_topic_bookmark_path(@topic, bookmark), class: "btn btn-danger"  %>
   <%= link_to "Destroy bookmark", [@topic, bookmark], method: :delete, class: "btn btn-danger" %>
  </p>

  <%= render partial: 'favorites/favorite', locals: { favorite: @favorite, bookmark: @bookmark } %>
  <% end %>
  </div>

 <%= link_to "New bookmark", new_topic_bookmark_path(@topic), class: 'btn btn-default' %>
</div>

我正在尝试将其添加到我的 application.css.scss 文件中

.bookmarks btn {
size: 2px;
}

但这似乎行不通。有什么建议吗？

Answer 1

试试这个:

   <p>  
   <%= link_to bookmark.url %>
  #these should be smaller
  <%= link_to "Edit bookmark", edit_topic_bookmark_path(@topic, bookmark), class: "btn btn-danger btn-sm"  %>
   <%= link_to "Destroy bookmark", [@topic, bookmark], method: :delete, class: "btn btn-danger btn-sm" %>
  </p>

您可以使用这些类来调整按钮的大小:

• btn-lg
• btn-sm
• btn-xs

bootstrap documentation