Question

我想要一行7列占据宽度的100％然后嵌套在下一行的那一行我想要1列也占据100％的宽度。

https://jsfiddle.net/DTcHh/27598/消息列完全位于错误的位置。

https://jsfiddle.net/w37vs3wr/1/消息列的大小合适但位置错误。我想让它完全像这样，但低于不在它们之上的其他列。

        <div class="row bg-warning">
            <div class="col-xs-1">Result</div>
            <div class="col-xs-2">Start</div>
            <div class="col-xs-1">Duration</div>
            <div class="col-xs-4">Test Case</div>
            <div class="col-xs-1">Total Data Items Generated</div>
            <div class="col-xs-2">Type</div>
            <div class="col-xs-1">Username</div>
            <div class="row">
                <div class="col-xs-12">Message</div>
            </div>
        </div>

Answer 1

解决方案是在第7行和第二行划分一行，并使用一列占据所有空格。

<div class="row">
  <div class="col-xs-1">Result</div>
  <div class="col-xs-2">Start</div>
  <div class="col-xs-1">Duration</div>
  <div class="col-xs-4">Test Case</div>
  <div class="col-xs-1">Total Data Items Generated</div>
  <div class="col-xs-2">Type</div>
  <div class="col-xs-1">Username</div>
</div>

<div class="row">
  <div class="col-xs-12">Message</div>
</div>

示例：https://jsfiddle.net/DTcHh/27601/

注意：背景颜色只是为了确保消息采用全宽

Boostrap嵌套行仅适用于不在下面的列

1 个答案: