gpt4 book ai didi

html - 如何使用 Bootstrap 将多张图片放在媒体对象的同一行?

转载 作者:太空宇宙 更新时间:2023-11-04 02:34:52 27 4
gpt4 key购买 nike

我编写了以下 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>

输出是:

output of HTML sample

有没有办法在同一行获取编辑和删除按钮?媒体 div 不是强制性的。我只是把它当作一个把东西放在左边,把别的东西放在右边的技巧。

编辑:

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

结果是:

enter image description here

按钮现在在同一行,但与文本不在同一行。

最佳答案

是这样的吗?如果您使用的是 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/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com