如何使用 bootstrap 添加按钮

Question

我是 Django 和 bootstrap 的新手，目前正在做一个项目。基本上我的问题纯粹是关于 html 和 css。我想在框的右侧插入一个按钮。我使用以下代码：

<div class="col-md-12 text-right">
  <a href="{% url 'listing' listing.id %}" class="btn btn-info">More Info</a>
</div>

但是我得到：

正如你所看到的，因为按钮有一个间隙，我怎样才能把这个按钮没有这个间隙。

来自 html 文件的代码：

                    <!--Listing One-->
                    {% if listings %}
                        {% for listing in listings %}
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="feat_property list">
                                <div class="thumb">
                                    <img class="img-whp" src="{{ listing.photo_main.url }}" alt="fp1.jpg">
                                    <div class="thmb_cntnt">
                                        <ul class="icon mb0">
                                            <li class="list-inline-item"><a href="#"><span class="flaticon-transfer-1"></span></a></li>
                                            <li class="list-inline-item"><a href="#"><span class="flaticon-heart"></span></a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="details">
                                    <div class="tc_content">
                                        <div class="dtls_headr">
                                            <ul class="tag">
                                                <li class="list-inline-item"><a href="#">{{ listing.available }}</a></li>
                                                <li class="list-inline-item"><a href="#">{{ listing.is_featured }}</a></li>
                                            </ul>
                                            <a class="fp_price" href="#">€{{ listing.price | intcomma }}<small>/mo</small></a>
                                        </div>
                                        <p class="text-thm">{{ listing.property_type }}</p>
                                        <h4>{{ listing.title }}</h4>
                                        <p><span class="flaticon-placeholder"></span> {{ listing.address }}, {{ listing.city }}, {{ listing.zipcode }}</p>
                                        <ul class="prop_details mb0">
                                            <li class="list-inline-item"><a href="#">Beds: {{ listing.bedrooms }}</a></li>
                                            <li class="list-inline-item"><a href="#">Baths: {{ listing.bathrooms }}</a></li>
                                            <li class="list-inline-item"><a href="#">Sq Ft: {{ listing.sqft }}</a></li>
                                        </ul>
                                    </div>
                                    <div class="col-md-12 text-right">
                                        <a href="{% url 'listing' listing.id %}" class="btn btn-info">More Info</a>
                                    </div>
                                    <div class="fp_footer">
                                        <ul class="fp_meta float-left mb0">
                                            <li class="list-inline-item"><a href="#"><img src="images/property/pposter1.png" alt="pposter1.png"></a></li>
                                            <li class="list-inline-item"><a href="#">{{ listing.realtor }}</a></li>
                                        </ul>
                                        <div class="fp_pdate float-right">{{ listing.list_date | timesince }}</div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <div class="col-md-12">
                            <p>No Listings Available</p>
                        </div>
                    {% endif %}
                </div>
                        <!--End Listing One-->

添加后：

    <div class="row mx-0">
    <ul class="prop_details mb0 col-10">
        <li class="list-inline-item"><a href="#">Beds: {{ listing.bedrooms }}</a></li>
        <li class="list-inline-item"><a href="#">Baths: {{ listing.bathrooms }}</a></li>
        <li class="list-inline-item"><a href="#">Sq Ft: {{ listing.sqft }}</a></li>
  </ul>
    <div class="col-2"><a href="{% url 'listing' listing.id %}" class="btn btn-info">More Info</a></div>
    </div>

Answer 1

我不确定你指的是什么差距

如果你指的是边距（按钮周围区域周围的间隙）尝试 style="margin:0px;"

如果你不想填充（按钮内部的间隙）试试 style="padding:0px;

如果你指的是间隙（从左到右）试试 style="width:100%;"

另外如果你指的是右边space的空隙，你也可以用style="float:left"

float left 的作用是将它移动到前一个 div 的 right-side 并把它 'next to' 放在 div

Answer 2

你的差距是来自容器的填充。您基本上需要在按钮的右侧添加负边距，这将解决问题。

干杯！

Answer 3

差距是由于第 12 列超过了 link。这个 col-12 将像行一样占据容器的整个宽度。因此，在您的情况下，html 很好地显示了您的要求。

为了纠正这个问题，我建议在按钮旁边设置 ul。 | ul | button |

我建议你在你的 ul:

旁边这样设置

<div class="row mx-0">
   <ul class="prop_details mb0 col-10">
      <li class="list-inline-item"><a href="#">Beds: {{ listing.bedrooms }}</a></li>
      <li class="list-inline-item"><a href="#">Baths: {{ listing.bathrooms }}</a></li>
      <li class="list-inline-item"><a href="#">Sq Ft: {{ listing.sqft }}</a></li>
  </ul>
  <div class="col-2"><a href="{% url 'listing' listing.id %}" class="btn btn-info">More Info</a></div>
</div>

所以我将 ul 和你的 link 设置为 div 和 row mx-0 class。然后我将 col-10 添加到您的 ul 并将 col-2 添加到 a 容器以使按钮更加灵活。

在您可以将 class align-middle 设置为您的 li 以确保它们保持在垂直中间

更正：我看到您使用的是 class mb0，但我猜您的意思是：mb-0

演示

.img-whp{         /* ONLY CREATED HERE BECAUSE CLASS NOT PROVIDED */
  max-width:50px; /* ONLY CREATED HERE BECAUSE CLASS NOT PROVIDED */
}                 /* ONLY CREATED HERE BECAUSE CLASS NOT PROVIDED */

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<!--Listing One-->
  {% if listings %}
    {% for listing in listings %}
  <div class="row mx-0">
    <div class="col-lg-12">
      <div class="feat_property list">
        <div class="thumb">
          <img class="img-whp" src="https://cdn.pixabay.com/photo/2020/09/09/14/47/man-5557864_960_720.jpg" alt="fp1.jpg">
          <div class="thmb_cntnt">
            <ul class="icon mb0">
              <li class="list-inline-item"><a href="#"><span class="flaticon-transfer-1"></span></a></li>
              <li class="list-inline-item"><a href="#"><span class="flaticon-heart"></span></a></li>
            </ul>
          </div>
        </div>
        <div class="details">
          <div class="tc_content">
            <div class="dtls_headr">
              <ul class="tag">
                <li class="list-inline-item"><a href="#">{{ listing.available }}</a></li>
                <li class="list-inline-item"><a href="#">{{ listing.is_featured }}</a></li>
              </ul>
              <a class="fp_price" href="#">€{{ listing.price | intcomma }}<small>/mo</small></a>
            </div>
            <p class="text-thm">{{ listing.property_type }}</p>
            <h4>{{ listing.title }}</h4>
            <p><span class="flaticon-placeholder"></span> {{ listing.address }}, {{ listing.city }}, {{ listing.zipcode }}</p>
            <div class="row mx-0">
              <ul class="prop_details mb0 col-10">
                <li class="list-inline-item"><a href="#">Beds: {{ listing.bedrooms }}</a></li>
                <li class="list-inline-item"><a href="#">Baths: {{ listing.bathrooms }}</a></li>
                <li class="list-inline-item"><a href="#">Sq Ft: {{ listing.sqft }}</a></li>
              </ul>
             <div class="col-2"><a href="{% url 'listing' listing.id %}" class="btn btn-info">More Info</a></div>
            </div>
          </div>
          
          <div class="fp_footer row">
            <ul class="fp_meta float-left mb0">
              <li class="list-inline-item"><a href="#"><img src="images/property/pposter1.png" alt="pposter1.png"></a></li>
              <li class="list-inline-item"><a href="#">{{ listing.realtor }}</a></li>
            </ul>
            <div class="fp_pdate float-right">{{ listing.list_date | timesince }}</div>
          </div>
        </div>
      </div>
    {% endfor %}
  {% else %}
    <div class="col-md-12">
      <p>No Listings Available</p>
    </div>
  {% endif %}
</div>
    <!--End Listing One-->

如何使用 bootstrap 添加按钮

How to add a button using bootstrap

css

django

jquery

bootstrap-modal

演示