Question

我在代码中使用引导按钮。我想更改特定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

Answer 2

您是否尝试过引导程序button size？

按钮的自定义css可能类似于。

.custom-button {
  font-size:0.8em;
  padding:5px;
}

降低padding和font size以缩小尺寸的位置。

Answer 3

我认为快速的方法是让它变得重要

＆＃13;

.bookmarks btn {
size: 2px!important;
}

＆＃13;

更改div中引导按钮的大小

3 个答案: