css 如何在右对齐引导按钮之间添加空格?

pcww981p  于 2023-01-22  发布在  其他
关注(0)|答案(4)|浏览(181)

我想在两个右对齐按钮之间添加3个空格。有没有不添加自定义css的 Bootstrap 解决方案?

我这样做:

<div class="text-right">
           <button class="btn-info btn">Log in</button>
<!-- Add 3 spaces between button -->
           <button class="btn-info btn">Log Out </button>
    </div>

小提琴演示:http://jsfiddle.net/6816gq84/1/

s8vozzvw

s8vozzvw1#

您可以将btn-toolbar类添加到容器div中。

<div class="text-right btn-toolbar">
       <button class="btn-info btn">Log in</button>
       <button class="btn-info btn">Log Out </button>
</div>

看一下here

zysjyyx4

zysjyyx42#

我做了一个基本的解决方案:How to add space between bootstrap buttons in same div?.

<div class="btn-group pull-right row">
   <div class="col-md-3"><button class="btn btn-default" type="button">Clôturer</button></div>
   <div class="col-md-1"></div>
   <div class="col-md-3"><button class="btn btn-primary" type="button">Soumettre</button></div>
</div>
mkh04yzy

mkh04yzy3#

这对我来说也很好:

<div style="display: flex ; justify-content: flex-end">
    <button class="btn-info btn mr-3">Log in</button>
    <button class="btn-info btn">Log Out </button>
</div>
cu6pst1q

cu6pst1q4#

我不确定是否已经存在任何 Bootstrap 解决方案来满足您的需求,但是还有其他方法,这取决于您所指的“自定义css”。
例如,你可以添加一个跨度应答器,并添加一个定义宽度为3em(3个空格)的内联css。它是HTML/CSS,但你不修改按钮类的css。

<div class="text-right">
       <button class="btn-info btn">Log in</button>
       <span style="width:3em;"> </span>
       <button class="btn-info btn">Log Out </button>
</div>

相关问题