Question

我写了以下HTML页面：

<html lang="en">
  <head>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <!-- Bootstrap theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
        <div class="media">
            <div class="media-body">
                Some text, some text, some text, some text
            </div>
            <div class="media-right">
                <a class="btn btn-default" href="#">
                    <span class="glyphicon glyphicon-pencil"></span>
                    Edit
                </a>
                <a class="btn btn-default" href="#">
                    <span class="glyphicon glyphicon-trash"></span>
                    Delete
                </a>
            </div>
        </div>
    </div>
  </body>
</html>

输出结果为：

有没有办法在同一行获取编辑和删除按钮？媒体div不是强制性的。我只是把它当作左边的东西和右边的其他东西。

编辑：

我根据答案更改了第14行：

结果是：

按钮现在位于同一行，但与文本不在同一行。

Answer 1

添加display：inline-block;

          <div class="media-right" style="display: inline-block;">
            <a class="btn btn-default" href="#">
                <span class="glyphicon glyphicon-pencil"></span>
                Edit
            </a>
            <a class="btn btn-default" href="#">
                <span class="glyphicon glyphicon-trash"></span>
                Delete
            </a>
        </div>

Answer 2

这样的东西？如果您使用bootstrap，为什么不使用引导网格？ Here您可以阅读有关bootstrap网格的更多信息。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<div class="container">
  <div class="col-md-8 col-xs-8">
    <span>Some text</span>
    <span>Some text</span>
    <span>Some text</span>
  </div>
  <div class="col-md-4 col-xs-4">
    <a class="btn btn-default" href="#">
      <span class="glyphicon glyphicon-pencil"></span> Edit
    </a>
    <a class="btn btn-default" href="#">
      <span class="glyphicon glyphicon-trash"></span> Delete
    </a>
  </div>
</div>

如何使用bootstrap将多张图片放在媒体对象的同一行上？

2 个答案: