【发布时间】：2020-10-08 16:00:12
【问题描述】：
我是 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>
【问题讨论】：
-
您可以为“更多信息”按钮添加自定义类并在 css 中使用它吗？如果是，您可以添加
margin-top: -10px;。玩价值-10，你会得到你想要的 -
您指的是按钮左侧的间隙吗？请分享您的整个代码以清楚地帮助您
-
@MaxiGui 是的，我指的是按钮左侧的间隙。我从 html 文件中添加了代码。
-
为您的问题提供一个正确的代码！
标签： jquery css django bootstrap-modal