小编Dav*_*ave的帖子

我下面的代码中的flexbox看起来很棒,但我很困惑如何确定盒子的宽度.

例如,如果删除在<p>或class="card_title"元素中写入的内容,则框的大小也会更改.

有没有办法将所有框设置为相同的宽度,无论标题或段落的长度如何？

codepen演示

img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}
.btn {
  background-color: white;
  border: 1px solid #cccccc;
  color: #696969;
  padding: 0.5rem;
  text-transform: uppercase;
}
.btn--block {
  display: block;
  width: 100%;
}
.cards {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cards__item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 1rem;
}
@media (min-width: 40rem) {
  .cards__item …

我目前有一个 flexbox 布局，如下所示：

蓝色是 class="wrap"，橙色和所有三个黄色框包含在两个单独的 class="wrap_col" 中，每个黄色框都包含在 class="wrap_item" 中。

.wrap {
  display: flex;
  flex-flow: row wrap;
    margin: 0 auto;
}

.wrap_col {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.wrap_item {
  margin:10px;
  display: flex;
  flex:1 0 auto;
  flex-direction: column; 
}

如何缩小三个黄色框的高度，使其与橙色框的高度相同？你能将 flexbox 缩小到与最短盒子相同的高度吗？

我正在尝试将引导程序工具提示添加到列表中的某些图标，但工具提示部分被行高隐藏：

我需要在下面的代码中添加什么样式才能将工具提示悬停在顶部？

<div ng-repeat="item in c.data.list track by $index" class="list-group-item">
      <div class="flex">
        <div style="margin-right:auto;">
          <span class="h4">{{item.short_description}}</span>
          <div>
            <small class="text-muted"><i class="fa fa-clock-o m-l-xs"></i><span style="padding-left: 5px;">Last Updated: {{item.last_updated}}</span></small>
          </div>
        </div>
        <div class="h4">
          <a class="link" ng-click="" data-toggle="tooltip" data-placement="top" title="Preview"><i class="fa fa-eye"></i></a>   
          <a class="link" ng-click="" data-toggle="tooltip" data-placement="top" title="Download"><i class="fa fa-download"></i></a>   
        </div>
      </div>
    </div>

ng-if如果条件满足,我试图用来显示某些行,但似乎不能让它100%正确地工作.

<div style="margin-bottom: 1em;">

  <h4><!-- content omitted for brevity--></h4>

  <p>
    <strong>Covered:</strong> &nbsp;
    <a ng-href class="pointer" data-ng-repeat="life in data.list2 track by $index" ng-if="life.beneficiary.length > 0" ng-click="c.editBeneficiary(life)">

      <!-- content omitted for brevity-->
    </a>

    <a ng-href class="pointer" ng-if="life.beneficiary.length = 0" ng-click="c.addBeneficiary()">Add Beneficiary&nbsp;<i class="fa fa-plus-circle" style="color: green;"/></a></p>

</div>

在上面的代码中,如果受益人的数量大于0(ng-if="life.beneficiary.length > 0"),我想列出名称并允许用户在必要时编辑它们.这部分工作正常.但是,如果受益人数等于0,那么我希望有一个"添加受益人"的链接,并允许用户这样做.

我把这些ng-if陈述放在<a>标签中,我不确定是对的.当我与没有受益人的用户登录时,"添加受益人"链接不会显示.

• 我在这做错了什么？

我们的团队希望根据用户输入的街道、城市、州和邮政编码生成串联地址。问题是很多时候用户可能无法填写所有这四个输入。有没有一种方法可以有效地生成串联地址字段的所有组合，而无需编写 12 个 if 语句？

例如，如果用户填写了所有 4 个字段，我们要返回以下内容：

return current.agency_street + ', ' + current.agency_city + ', ' + current.agency_state + ', ' + current.agency_zip;

如果他们填写了除邮政编码之外的所有内容，我们要返回：

return current.agency_street + ', ' + current.agency_city + ', ' + current.agency_state;

有没有办法在没有所有 if 语句的情况下做到这一点？谢谢！