如何让两个引导按钮并排放置?

Ok so i am trying to set buttons on a modal side by side. One is a download link and the other is a mirror. I tried creating my own class with the css of display: inline-block; but that didnt work. How do i make them side by side?

好的，我试着把按钮并排放在模式上。一个是下载链接，另一个是镜像。我尝试用显示的css创建我自己的类:inline-block;但这没有工作。我如何让他们肩并肩?

Heres my code for my modal:

这是我的模式代码:

<!-- 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 -->

5 个解决方案

#1

Use a button group.

使用一个按钮组。

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

#2

Try this putting text-align:center on the outer element:

尝试将文本对齐:居中于外部元素:

<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

示范

EDIT: Or by using the text-center class:

编辑:或使用文本中心类:

<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

示范

#3

Why not use the pull-left pull-right in bootstrap3 like

为什么不在bootstrap3中使用左拉右呢

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

#4

In my case, I was hanging for 20 minutes.
Finally

就我而言，我挂了20分钟。最后

<td class="text-nowrap"> 

worked.

工作。

#5

Neither the text-center or btn-group solution worked for me. I ended up putting the two buttons in a row together and that worked.

文本中心或btn组解决方案对我都不起作用。最后我把两个按钮排成一列，这样就行了。

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