Question

我正在尝试在Panel Heading中插入Label，Search bar，Button组。

我有以下代码

JSON.parse

截至目前，它可行，但搜索栏和按钮组之间没有空格。我希望它们之间有5px的空间，所以这样：

<div class="panel panel-default">
<div class="panel-heading">
<span class="label label-default">
<%= yield(:title) %>
</span>
  <div class="btn-group pull-right" role="group" >
  <button type="button" class="btn btn-default">
<% if can? :create, Client %>
<%= link_to 'New', new_client_path %>
<% end %>
</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>
<div class="input-group col-lg-3 pull-right">
                    <input type="text" class="form-control" placeholder="Search">
                    <div class="input-group-btn">
                        <button class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button>
                        <button class="btn btn-primary"><i class="glyphicon glyphicon-wrench"></i></button>
                    </div>
                </div>

</div>
<div id="clients"><%= render 'clients' %></div>
<p class="small"><%= will_paginate @clients %></p>
</div>

如何实现这一目标？我正在使用Rails 4和Sass

Answer 1

为了更好地回答这个问题，我们需要知道你正在使用什么CSS。猜测我建议在搜索输入周围添加DIV并添加一个带有display：inline-block的类，然后添加一个正确的填充。

<div class="mycustclass">
   <input type="text" class="form-control" placeholder="Search">
</div>

.mycustclass {
   display: inline-block;
   padding-right: 5px;
}

您还需要.input-group-btn课程来使用display:inline-block。

如果这不起作用，还有很多其他选择。

Answer 2

只需写一个margin-right：第一个btn-primary内联中的5px比它的工作要好不写padding-right

<div class="input-group-btn">
   <button class="btn btn-primary" style="margin-right:5px;"><i class="glyphicon glyphicon-search"></i></button>
                        <button class="btn btn-primary"><i class="glyphicon glyphicon-wrench"></i></button>
</div>

Bootstrap 3中按钮和搜索栏中的简单间隔符

2 个答案: