Question

我尝试将引导程序列表组（标记li内部）中的文本与display: table-cell; line-height: 50px; vertical-align: middle;垂直对齐，但它根本不起作用。请帮帮我。 ;）

<div class="row">
                <div class="col-md-12">
                    <ul class="list-group">


                    <li class="list-group-item clearfix">Byl jsi pořádně prošťouchán uživatelem <strong>hakys</strong>.
                                <form action="my_pokes.php" method="post">
                                    <span class="pull-right">
                                        <button class="btn btn-success" name="poke_hakys">Šťouchnout zpět</button>&nbsp;
                                        <button class="btn btn-danger" name="delete_hakys">Smazat šťouchnutí</button>
                                    </span>
                                </form>
                            </li>                        </ul>
                </div>
            </div>

Answer 1

我对您的代码进行了一些更改。最大的变化是，我没有设置一个12跨度列，而是将其分为三个。这样可以更容易地在引导程序中布置项目。

如果这有助于您，请告诉我。

<div class="row">
<div class="col-md-3"></div>
<div class="col-md-5">
    <ul class="list-group">
        <li class="list-group-item clearfix">Byl jsi pořádně prošťouchán uživatelem <strong>hakys</strong>.</div>
<div class="col-md-4">
    <form action="my_pokes.php" method="post"> <span class="pull-right">
    <button class="btn btn-success" name="poke_hakys">Šťouchnout zpět</button>&nbsp;
    <button class="btn btn-danger" name="delete_hakys">Smazat šťouchnutí</button>
    </span>
    </form>
    </li>
    </ul>
 </div>
</div>
</div>

Answer 2

你可以做这样的事情，然后你不需要覆盖list-group-item风格..

<div class="row">
        <div class="col-md-12`">
            <ul class="list-group">
                <li class="list-group-item text-right">
                    <span class="pull-left">
                    Byl jsi pořádně prošťouchán uživatelem <strong>hakys</strong>.</span>
                    <form action="my_pokes.php" method="post" class="form-inline">
                        <span>
                            <button class="btn btn-success" name="poke_hakys">Šťouchnout zpět</button>&nbsp;
                            <button class="btn btn-danger" name="delete_hakys">Smazat šťouchnutí</button>
                        </span>
                    </form>
                </li>
            </ul>
        </div>
    </div>

演示：http://codeply.com/go/6H4wBABPGw

Bootstrap列表组中的垂直对齐文本

2 个答案: