Question

我正在尝试将标签放在div中，如图所示。

任何想法如何显示内联和良好的对齐？

CODEPEN：CODEPeN DEMO

请看两个标签：

AUDI word wide -should Audi R8 named after SO?
wat more
最右边的按钮

Answer 1

为了解决这个问题，我会使用一些CSS和DIV来排列内联。你真的不需要boostrap CSS语法和类，一些好的旧CSS会完成这项工作。

我会使用一个名为“item”的主DIV，它将作为我所有元素的容器：图像，标签，超链接。

接下来，使用一些CSS，我会开始将所有元素排列在一起，主要是让它们浮动。由于两个超链接都会向右浮动，我想确保在我的html中，“绿色药丸按钮”放在“想要更多链接”的前面，这样他才真正显示在最右边。

无论如何，这是一种方法，可能不是最好的，但它的确有效。如果您调整浏览器的大小，则所有内容都是内联的。当然，我会将一些MediaQueries用于移动设备宽度，但我会留给你。

我希望这会有所帮助，并且它会回答你的问题！

JSFiddle

这里的完整代码如下：

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="bootstrap/dist/js/bootstrap.min.js"></script>
<style type="text/css">
.container{margin-top:50px;}
.item{background:#F3F3F3;height: 35px;-webkit-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px;}
.item img {-webkit-border-radius: 5px 0 0 5px;border-radius: 5px 0 0 5px;float: left;}
.item .descriptionContainer{float: left;margin-left:45px;}
.item a {float: right;}
.item .pillBtn{-webkit-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px;background:#7CDD97;padding: 5.5px 40px 5.5px 40px;color: #FFF;font-weight: bold;font-size: 17px;text-decoration: none;}
.item .moreBtn{position: relative;font-size: 12px;margin-right: 15px;margin-top: 15px;} 
</style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="item">
                <img class="media-object" src="http://www.menucool.com/slider/prod/image-slider-4.jpg" height="35">
                <div class="descriptionContainer">
                    <h6>Small description</h6>
                </div>
                <a class="pillBtn" href="#">78</a>
                <a class="moreBtn" href="#">want more?...</a>
            </div>
        </div>
    </div>
</div>

</body>
</html>

Answer 2

媒体查询是一个CSS3模块，允许内容呈现并适应多种屏幕分辨率（例如智能手机和/或平板电脑与高清屏幕）。

媒体查询由媒体类型和一个或多个表达式组成，这些表达式将解析为true或false。当媒体查询为true时，将应用相应的样式表或样式规则。例如，表达式可以评估浏览器宽度是否对应于某个值，如果答案为真，则它将应用您事先定义的特定CSS规则。

Bootstrap已经使用媒体查询来调整页面内容的大小，但您可以通过定义自己的内容来扩展它们。

/*Smartphones*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    /*Styles*/
    h1 { margin:0; margin-bottom: 25px; }
    p { width:350px; }
    /*etc etc etc...*/
}

查看这些链接并阅读一下，也有一些有用的例子。快乐的编码！

Source1

Source2

Source3

使用bootstrap css调整标签

2 个答案: