我编写了以下 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 行:
结果是:
按钮现在在同一行，但与文本不在同一行。
最佳答案
是这样的吗？如果您使用的是 Bootstrap ，为什么不使用 Bootstrap 网格？ Here您可以阅读有关引导网格的更多信息。
<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>关于html - 如何使用 Bootstrap 将多张图片放在媒体对象的同一行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35877951/