Question

您好我正在尝试实现以下布局

使用以下html，css和bootstrap类

<div class="row">
    <div class="col-xs-12 fix-result">
        <div class="row">
            <p class="fix-result-info">friendly Match | 23 July 2016 | The Muga | KO 14:30 </p>
            <div class="col-sm-6 text-center">
                    <p>WON</p>
                    <h4>Team A 2-1 Team B</h4>
            </div>
            <div class="col-sm-6 match-details">
                <p>goalscorers</p>
            </div>
        </div>
    </div>
</div>

.fix-result {padding:10px;border: 1px solid #0359cf; margin-bottom:20px;}
.fix-result-info { color: #0359cf;text-transform: uppercase; text-align: center;}
.fix-result .match-details {padding:10px;background-color: #0359cf;}

小提琴 - https://jsfiddle.net/kngsne42/

但是，蓝色div不在父div的范围之外浮动，我不确定如何解决问题。

我是否正确嵌套行和列？

由于保罗

Answer 1

我认为你不应该嵌套行。此外，您应该将行放在容器中。

（另见：Bootstrap 3 Grid, do I need a container?）

以下代码似乎可以解决问题：

.fix-result {padding-right:20px;border: 1px solid #0359cf; margin-bottom:20px;}
.fix-result-info { color: #0359cf;text-transform: uppercase; text-align: center;}
.fix-result .match-details {padding:10px;background-color: #0359cf;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row col-xs-12 fix-result">
        <p class="fix-result-info">friendly Match | 23 July 2016 | The Muga | KO 14:30 </p>
        <div class="col-sm-6 text-center">
            <p>WON</p>
            <h4>Team A 2-1 Team B</h4>
        </div>
        <div class="col-sm-6 match-details">
            <p>goalscorers</p>
        </div>
    </div>
</div>

希望它有所帮助。

Answer 2

我更新了你的代码

<div class="row">
<div class="col-xs-12">
    <div class="row fix-result">
        <p class="fix-result-info">friendly Match | 23 July 2016 | The Muga | KO 14:30 </p>
        <div class="col-sm-6">
        <div class="text-center">
                <p>WON</p>
                <h4>Team A 2-1 Team B</h4>
        </div>
        </div>
        <div class="col-sm-6 ">
        <div class="match-details">
            <p>goalscorers</p>
        </div>
        </div>
    </div>
</div>

只是改变标签。它会起作用。

嵌套引导行＆amp;列

2 个答案: