Question

我有一个有三个部门的行：

图片（两个div，文本和文字）按钮

我唯一能做的就是将按钮拉到div的右侧或底部，但不要居中，我该怎样才能实现这个目标？

我的代码：

<div class="row">
    <div class="col-md-9 ">
        <div class="row">
            <div class="col-md-12">
                <h3>
                    h3. Lorem ipsum dolor sit amet.
                </h3>
            </div>
        </div>
        <div class="row list-group-item ">

            <div class="col-md-3 text-center">
                <img alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-circle">
            </div>
            <div class="col-md-5 ">
                <div class="row">
                    <div class="col-md-6 ">
                        <h3>
                            h3. Lorem ipsum dolor sit amet.
                        </h3>
                    </div>
                    <div class="col-md-6">
                        <h3>
                            h3. Lorem ipsum dolor sit amet.
                        </h3>
                    </div>
                </div>
            </div>
            <div class="col-md-4">

                <button type="button" class="btn btn-success btn-lg pull-right">
                    Default
                </button>
            </div>

        </div>
    </div>

这就是我所拥有的：

这就是我想要的，但我无法实现：

我希望按钮居中

Answer 1

首先，你已经划分了一些宽度为100％的部分。（通过在一排内使用两个col-6）。这意味着他们已经在那一行中尽可能地扩展。

你应该增加

中的col号

rate

同时减少按钮列

 <div class="col-md-5 ">

最后，您可以通过以下方式设计结构：

<div class="col-md-4">

使用以下css规则：

<div class="row">
    <div class="col-md-6 text-center">
        <div class="centered-block">
            <div>h3. Lorem ipsum dolor sit amet.</h3>
        </div>
    </div>
    <div class="col-md-6 text-center">
        <div class="centered-block">
            <h3>h3. Lorem ipsum dolor sit amet.</h3>
        </div>
    </div>
</div>

Haven没有对它进行测试，但这应该可行。

Answer 2

首先不需要使用这么多嵌套的行和列，你应该尝试通过使用更少的html元素来实现这个结果。其次将你的块分成相等的部分（使用col-md-3类四次）。

<div class="row list-group-item ">
    <div class="col-md-3 text-center vcenter">
        <img alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-circle">
    </div>
  <div class="col-md-3 vcenter">
    <h3>
      h3. Lorem ipsum dolor sit amet.
    </h3>
  </div> 
  <div class="col-md-3 vcenter">
    <h3>
      h3. Lorem ipsum dolor sit amet.
    </h3>
  </div>
    <div class="col-md-3 vcenter text-center">
        <button type="button" class="btn btn-success btn-lg">
            Default
        </button>
    </div>
</div>

最后使用div的垂直对齐方式：

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
    margin-left: -4px;
}

你可以在这里查看小提琴：https://jsfiddle.net/johannesMt/npgsnojf/3/ 它通过使用更少的html元素来实现相同的结果，这使得代码更具可读性。希望这有帮助！

在Bootstrap中对齐列表组中的内容（垂直和水平）

2 个答案: