我在一行上有一个按钮和一个容器，我正在尝试将按钮设置为全宽（引导程序中为F2），而计数框位于同一行。现在的问题是我可以在相同的行上获得按钮，如果我给它一个固定的宽度，但如果容器在其他分辨率上的宽度较小或者按钮的计数为{{1例如，而不是btn-block。
以下是我现在所拥有的：
4834 3有这个CSS：
<div class="button-container">
<div class="btn btn-primary">Boo</div>
<div id="count_box" class="count_box">42</div>
</div>
请注意.count_box可以是600px宽或200px宽等等。所以我不能给它一个固定的宽度。一个jsFiddle解释它比这里的代码更好：http://jsfiddle.net/gdrpmr13/1/
有没有简单的方法可以让按钮和计数在同一行上，而按钮是100％（减去计数的宽度）？我输了。
答案 0 :(得分：3)
你可以通过一些智能浮动操作来完成它，这样所有宽度都是动态的，仍然按钮填充剩余宽度。请注意，我已将课程pull-right添加到计数框并在按钮之前移动。
.button-container .btn {
display: block;
width: auto;
overflow: hidden;
}
.count_box {
position: relative;
background: #FFF;
border: 1px solid #333;
margin-left: 10px;
border-radius: 3px;
padding: 6px 10px;
top: 1px;
color: #333;
}
.count_box:after, .count_box:before {
right: 100%;
top: 50%;
border: medium solid transparent;
content:" ";
height: 0px;
width: 0px;
position: absolute;
pointer-events: none;
}
.count_box:after {
border-color: rgba(255, 255, 255, 0) #FFF rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
border-width: 8px;
margin-top: -8px;
}
.count_box:before {
border-color: rgba(221, 221, 221, 0) #333 rgba(221, 221, 221, 0) rgba(221, 221, 221, 0);
border-width: 9px;
margin-top: -9px;
}
.button-container {
display: inline-block;
width: 400px;
background-color: #FF0000;
padding:20px 0px;
}
.button-container-2 {
margin-top:20px;
display: inline-block;
width: 200px;
background-color: #FF0000;
padding:20px 0px;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
<div class="button-container">
<div class="count_box pull-right">42</div>
<div class="btn btn-primary">Boo</div>
</div>
<div class="button-container">
<div class="count_box pull-right">4333234</div>
<div class="btn btn-primary">Boo</div>
</div>
这是另一个演示，演示了调整父容器大小时的工作原理（调整大小演示窗格）：http://jsfiddle.net/gdrpmr13/3/
答案 1 :(得分：1)
你可以让我们说60px的计数部分和剩余宽度的按钮。
因此，您应该选择 60px宽度，假设您在那里预期的最大数量，然后按照您想要的方式对齐。
<强> HTML
<div class="button-container">
<div class="btn btn-primary btn-block-almost">Boo</div>
<div id="count_box" class="count_box">42</div>
</div>
<div class="button-container-2">
<div class="btn btn-primary btn-block-almost">Boo</div>
<div id="count_box" class="count_box">4255</div>
</div>
<强> CSS
.count_box {
position: relative;
background: #FFF;
border: 1px solid #333;
display: inline-block;
margin-left: 10px;
border-radius: 3px;
padding: 6px 10px;
top: 1px;
color: #333;
width: 60px;
}
.btn-block-almost{
width: calc(100% - 80px);
}
刚刚为你的标记添加了一些css和一个类，这对我来说很好看