如何为非偏移块配置Twitter Bootstrap？

Question

我使用AngularJS设置变量值。

<div class="col-md-5">Cost:</div>
<div class="col-md-7">{{ cost }}</div>
<div class="col-md-5">Total:</div>
<div class="col-md-7">{{ total }}</div>

我看到了

Cost:  5
Total: 7

但是当cost = ""时，我看到了：

Cost:  Total:
7

但我希望看到：

Cost:
Total: 7

如何配置我的HTML？

Answer 1

当然你可以简单地添加一个换行符？

<br />

或者您可以编写一个可以测试成本价值的脚本。无论如何，为什么成本要=“”？肯定会有总费用吗？

尝试设置cost =“”，中间有空格。

你也可以使用php。

Answer 2

您可以将自己的行换行到div.row，如下所示：

<div class="row">
  <div class="col-xs-5">Cost:</div>
  <div class="col-xs-7">{{cost}}</div>
</div>
<div class="row">
  <div class="col-xs-5">Total:</div>
  <div class="col-xs-7">{{total}}</div>
</div>

所以，现在当你没有模特的价值时，你仍然可以在一行中看到你的标签。

演示：http://plnkr.co/edit/kSvv1EjXyB7qhXotNEA7?p=preview

Answer 3

你可以在这做两件事。首先，您应该为每行数据启动一个新的row元素，如下所示：

<div class="container">
  <div class="row">
    <div class="col-md-5">Cost:</div>
    <div class="col-md-7"></div>
  </div>
  <div class="row">
    <div class="col-md-5">Total:</div>
    <div class="col-md-7">{{ total }}</div>
  </div>
</div>

您可以做的下一件事是将&nbsp添加到您的div内容

.col-md-5 { background-color: red; }
.col-md-7 { background-color: green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<h5>Example 1:</h5>

<div class="container">
  <div class="row">
    <div class="col-md-5">Cost:</div>
    <div class="col-md-7"></div>
  </div>
  <div class="row">
    <div class="col-md-5">Total:</div>
    <div class="col-md-7">{{ total }}</div>
  </div>
</div>

<h5>Example 2:</h5>

<div class="container">
  <div class="row">
    <div class="col-md-5">Cost:</div>
    <div class="col-md-7">&nbsp;</div>
  </div>
  <div class="row">
    <div class="col-md-5">Total:</div>
    <div class="col-md-7">{{ total }}</div>
  </div>
</div>

Answer 4

如果您希望元素是内联而不是div，请使用span。将内联元素包含在一个完整长度的div中

<div class="col-md-12">
    <span class="col-md-5">Cost:</span>
     <span class="col-md-7">{{ cost }}</span>
</div>

<div class ="col-md-12">
    <span class="col-md-5">Total:</span>
    <span class="col-md-7">{{ total }}</span>
</div>

演示：http://jsfiddle.net/HB7LU/11572/

P.S：改变成本的价值并进行测试。