原先的Framework7的代码：
<div class="content-block"> <div class="row"> <div class="col-50"> <input type="submit" value="分享链接" class="button button-big button-fill color-blue"/> </div> <div class="col-50"> <form action="{{ url_for("create_event_qrcode", eventId=curEvent.id, curUserOpenid=curEvent.creator.openid) }}" method="POST"> <input type="submit" value="生成邀请码" class="button button-big button-fill color-blue"/> </form> </div> </div> <div class="row"> <div class="col-100"> <form action="{{ url_for("join_event", event_id=curEvent.id, toAddUserOpenid=curEvent.creator.openid) }}" method="POST"> <input type="submit" value="报名" class="button button-big button-fill color-pink"/> </form> </div> </div> </div> |
效果是：
最底下的两行的按钮，紧挨着
－》希望上下两行留点间隔
framework7 row add gap
framework7 row add space
Can a bottom margin be applied to a row? | Foundation Forum from ZURB
framework7 button margin
F7的英文站点：
Buttons | Framework7 Documentation
->
中文站点：
Framework7 – Full Featured Mobile HTML Framework For Building iOS & Android Apps
折腾了一会，暂时用：
<p class="content-block"> <div class="row"> <!–<div class="buttons-row">–> <div class="col-50"> <input type="submit" value="分享链接" class="button button-big button-fill color-blue"/> </div> <div class="col-50"> <form action="{{ url_for("create_event_qrcode", eventId=curEvent.id, curUserOpenid=curEvent.creator.openid) }}" method="POST"> <input type="submit" value="生成邀请码" class="button button-big button-fill color-blue"/> </form> </div> </div> <p class="buttons-row theme-green"> <form action="{{ url_for("join_event", event_id=curEvent.id, toAddUserOpenid=curEvent.creator.openid) }}" method="POST"> <input type="submit" value="报名" class="button button-big button-fill color-green"/> </form> </p> </div> |
效果是：
虽然左右两边到边了，不太好看，但是算凑合能看吧。
［总结］
把之前的div class=“row”换成了p，然后上下两行间隔距离就有了
只是现在按钮左右两边到边了，不是太好看，目前暂时凑合用吧。
有机会再深究。
转载请注明：在路上 » ［基本解决］Framework7中增加上下两行按钮的垂直间隔距离