Question

好的，所以我试图在一个模式上并排设置按钮。一个是下载链接，另一个是镜像。我尝试使用display的css创建自己的类：inline-block;但那没用。我如何并排制作它们？

继承我的模态代码：

<!-- Texturepack Popup Start -->

    <div class = "modal fade" id = "texturepack" role = "dialog">
        <div class = "modal-dialog">
            <div class = "modal-content">
                <div class = "modal-header">
                    <h4>Texture Pack Download</h4>
                </div>
                <div class = "modal-body">
                    <center><h3>Download our Custom Texture Pack!</h3></center>
                    <p class = "tpbutton btn-toolbar">
                    <a style = "margin: 0 200px; display: inline-block" class = "btn navbar-btn btn-primary pull-center" href = "#" target = "_texturepack">Download</a>
                    <a style = "margin: 0 300px; display: inline-block" class = "btn navbar-btn btn-default pull-center" href = "#" target = "_texturepack">Mirror</a>
                    </p>
<!-- Carousel Text Start -->
    <div style = "height:15px"></div>
    <div style = "border: 2px solid black; width: 500px; margin: 0 auto" id = "textureCarousel" class = "carousel slide">

        <ol class = "carousel-indicators" data-ride = "carousel">
            <li data-target = "#textureCarousel" data-slide-to = "0" class = "active"></li>
            <li data-target = "#textureCarousel" data-slide-to = "1"></li>
            <li data-target = "#textureCarousel" data-slide-to = "2"></li>
        </ol>

        <div class = "carousel-inner">

            <div class = "item active">
                <img src = "img/a.png" alt = "Beach" class = "img-responsive">
            </div>

            <div class = "item">
                <img src = "img/b.png" alt = "Beach" class = "img-responsive">
            </div>

            <div class = "item">
                <img src = "img/c.png" alt = "Beach" class = "img-responsive">
            </div>

        </div>

    </div>      

<!-- Carousel End -->
                </div>
                <div class = "modal-footer">
                    <a class = "btn btn-danger" data-dismiss = "modal">Close</a>
                </div>
            </div>
        </div>
    </div>

<!-- Texturepack Popup End -->

Answer 1

使用按钮组。

<div class="btn-group">
  <a href="#" class="btn btn-primary">Download</a>
  <a href="#" class="btn btn-default">Mirror</a>
</div>

Answer 2

尝试将text-align:center放在外部元素上：

<p class = "tpbutton btn-toolbar" style="text-align:center">
     <a class = "btn navbar-btn btn-primary" href = "#" target = "_texturepack">Download</a>
     <a class = "btn navbar-btn btn-default" href = "#" target = "_texturepack">Mirror</a>
</p>

Demonstration

编辑或使用text-center类：

<p class = "tpbutton btn-toolbar text-center">
     <a class = "btn navbar-btn btn-primary" href = "#" target = "_texturepack">Download</a>
     <a class = "btn navbar-btn btn-default" href = "#" target = "_texturepack">Mirror</a>
</p>

Demonstration

Answer 3

在我的情况下，我挂了20分钟最后

<td class="text-nowrap">

的工作。

Answer 4

为什么不在bootstrap3中使用pull-left pull-right，如

<button class = "btn-primary pull-left">Download</button>
<button class = "btn-danger pull-right">Mirror</button>

Answer 5

btn-group有效的同时，它删除了两个按钮之间的空格：

例如，此代码：

<div class="btn-group">
        <button class="btn btn-primary">Transaction History</button>
        <button class="btn btn-primary">Make New Payment
        </button>
      </div>

会给你这个：

如果要在按钮之间留出空间，请改用btn-toolbar：

 <div class="btn-toolbar" style="padding-left: 15px">
        <button class="btn btn-primary">Transaction History</button>
        <button class="btn btn-primary">Make New Payment
        </button>
      </div>

我添加了样式，因为没有样式，按钮将向左对齐。将填充值更改为您的要求。

Answer 6

文本中心或btn-group解决方案都不适合我。我最终将两个按钮连在一起，这很有效。

<div class="row">
  <%= button_to "Delete", "#", :class=>"btn" %>  
  <%= f.button :submit %>
</div>

Answer 7

带有引导程序4

<div class="float-right">
   <button>Cancel</button>
   </button>Save</button>
</div>

Answer 8

对于只看两个的人，仅用Bootstrap（4）类并排创建两个全角按钮，您可以使用以下代码：

<div class="btn-group btn-block">
    <button class="btn btn-danger mr-2 rounded">Cancel</button>
    <button class="btn btn-success ml-2 rounded">Save</button>
</div>

说明：btn-group类连接按钮，而btn-block使它们全角。每个按钮都有一个空白（mr-2和ml-2）以断开它们的连接（但并排放置），而圆形类使断开连接的按钮的角再次变圆。

如何并排制作两个自举按钮？

8 个答案: