Question

所以我正在尝试用右边的标题和徽章制作一个引导行。要查看正在发生的事情，请参阅此帖子底部的图片。

代码如下：

<div class="box workoutscontent">
    <div class="row">
        <div class="col-xs-10 col-md-10">
            <h1 class="workouttitle">@workout.WorkoutTitle</h1>
        </div>
        <div class="col-xs-2 col-md-2">
            <h1>
                @if (workout.Goal == "Afslanken")
                {<span class="label label-primary workoutlabel">Afslanken</span>}
                @if (workout.Goal == "Aankomen")
                {<span class="label label-success workoutlabel">Aankomen</span>}
                @if (workout.Goal == "Spiermassa opbouwen")
                {<span class="label label-warning">Spiermassa opbouwen</span>}
            </h1>
        </div>
    </div>

    <hr/>

    <div class="row">
        <div class="col-md-12">
            <p>@workout.DescriptionShort</p>
        </div>
    </div>
</div>

适用于它的CSS是

名称：

.workoutscontent h1 {
    margin-top: 0;
    font-family: 'Nunito', sans-serif;
}

标签：

.workoutlabel {
    float: right;
}

结果如下：

为什么标签不在我放入的盒子外面？

Answer 1

而不是float：右边的.workoutlabel类只需在

上添加文本右侧类

还将col-xs-10 col-md-10替换为col-xs-9 col-md-9和col-2-xs col-2-md替换为col-xs-3 col-md-3

Answer 2

您遇到的主要问题是，正确的列定义对于其内容来说不够大，因此您需要从左列中取一些内容并添加到右侧。记得每排拍12支。

此外，您不需要在h1上使用浮点数，只需在div上使用Bootstrap的text-right类，在列中右对齐。使用网格可以帮助您消除使用浮动，这可以为您创建额外的样式工作，因为它会使元素脱离正常流程。

下面是一个示例，显示您的标记（结构上）和其下方的另一个版本，其中设置了不同的列，为右侧列的内容留出空间，以及删除浮动。我在列上放了一个灰色的背景，这样你就可以看到那里发生了什么。

在列设置中，我将其更改为：

XS 屏幕：5/7
S 屏幕：6/6
M + 屏幕：7/5

＆＃13;

.workoutscontent h1 {
  margin-top: 0;
  font-family: 'Nunito', sans-serif;
}

.workoutlabel {
  float: right;
}

/* for demonstration purposes only */
div.row div {
  background: #cccccc;
  border: 1px solid white;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<code>Unmodified:</code>
<div class="box workoutscontent">
    <div class="row">
        <div class="col-xs-10 col-md-10">
            <h1 class="workouttitle">Title</h1>
        </div>
        <div class="col-xs-2 col-md-2">
            <h1>
                <span class="label label-primary workoutlabel">Afslanken</span>
            </h1>
        </div>
    </div>
</div>

<hr/>


<code>Fixed:</code>
<div class="box workoutscontent">
    <div class="row">
        <div class="col-xs-5 col-s-6 col-md-7">
            <h1 class="workouttitle">Title</h1>
        </div>
        <div class="col-xs-7 col-s-6 col-md-5 text-right">
            <h1>
                <span class="label label-primary">Afslanken</span>
            </h1>
        </div>
    </div>
</div>

＆＃13;

BTW ... <span>在h1中是完全可接受的标记，因为它是内联元素，所以尽管评论不是这样，但不要担心。 Bootstraps自己的文档以这种方式显示：https://getbootstrap.com/docs/3.3/components/#labels

元素从Bootstrap中超出了列

2 个答案: