3

我一直在尝试将插入符号应用于 Bootstrap 3 中的输入组元素。到目前为止失败。尝试对插入的伪元素使用表格单元格显示，尝试绝对定位，尝试使用 content 属性来显示 Web 字体插入符号而不是我首选的 CSS 三角形插入符号。只是不能把我的头绕在这个上面。

这是一个 JSFiddle（红色边框是我希望插入符号显示的位置）。

.input-group .input-group-addon:last-child:before,
.input-group .input-group-btn:last-child:before,
.input-group .input-group-addon:not(:last-child):before,
.input-group .input-group-btn:not(:last-child):before {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border: 10px solid transparent;
  margin: auto;
  top: 0;
  bottom: 0;
  z-index: 1000;
}

.input-group .input-group-addon:last-child:before,
.input-group .input-group-btn:last-child:before {
  border-right-color: red;
  right: 0;
}

.input-group .input-group-addon:not(:last-child):before,
.input-group .input-group-btn:not(:last-child):before {
  border-left-color: red;
  left: 0;
}

编辑：根据一个答案，我修改了现在在除 IE10 及以下所有版本中都可以正常工作的样式。IE 将左对齐的插入符号偏移input-group，4px如下所示http://jsfiddle.net/W8mFS/3/。任何想法如何解决这个问题？

更新的 CSS：

.input-group.input-group-caret span:after,
.input-group.input-group-caret > input + span:before {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 10px solid transparent;
}

.input-group.input-group-caret > input + span:before {
  border-right-color: #cccccc;
  margin-left: -20px;
}

.input-group.input-group-caret > input + span:empty:before {
  margin-left: -44px;
}

.input-group.input-group-caret > input + span:after {
  border-left-color: transparent;
}

.input-group.input-group-caret span:after {
  border-left-color: #cccccc;
}

.input-group.input-group-caret .input-group-addon {
  padding: 0;
}

.input-group.input-group-caret .input-group-addon i {
  font-style: normal;
  margin-left: 12px;
  padding-right: 12px;
}

.input-group.input-group-caret .input-group-addon:empty {
  padding-left: 24px;
}

更新：在这里增加了input-groupJSFiddle 的大小：http: //jsfiddle.net/W8mFS/4/。

LESS 代码显示了使用 Bootstrap 变量来控制插入符号大小、边距和填充：

@import "path_to_bootstrap/less/mixins";
@import "path_to_bootstrap/less/variables";

// input-group caret size
@caret-size-base:  ceil(@font-size-base * 0.70);  // ~10px;
@caret-size-large: ceil(@caret-size-base * 1.20); // ~12px;
@caret-size-small: ceil(@caret-size-base * 0.80); // ~8px;

// input-group caret
.input-group.input-group-caret {
  span:after,
  > input + span:before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;

    // v-align to middle
    top: 0;
    bottom: 0;
    margin: auto;

    border: @caret-size-base solid transparent;
  }

  > input + span:before { border-right-color: @input-border; margin-left: -( 2 * @caret-size-base ); }                  // right aligned
  > input + span:empty:before { margin-left: -(( 2 * @padding-base-horizontal ) + ( 2 * @caret-size-base )); }          // right aligned
  > input + span:after  { border-left-color: transparent; }                                                             // right aligned
  span:after  { border-left-color: @input-border; }                                                                     // left aligned

  // sizing
  &.input-group-sm {
    span:after,
    > input + span:before {
      border: @caret-size-small solid transparent;
    }

    > input + span:before { border-right-color: @input-border; margin-left: -( 2 * @caret-size-small ); }               // right aligned
    > input + span:empty:before { margin-left: -(( 2 * @padding-base-horizontal ) + ( 2 * @caret-size-small )); }       // right aligned
    > input + span:after  { border-left-color: transparent; }                                                           // right aligned
    span:after  { border-left-color: @input-border; }                                                                   // left aligned
  }

  &.input-group-lg {
    span:after,
    > input + span:before {
      border: @caret-size-large solid transparent;
    }

    > input + span:before { border-right-color: @input-border; margin-left: -( 2 * @caret-size-large ); }               // right aligned
    > input + span:empty:before { margin-left: -(( 2 * @padding-base-horizontal ) + ( 2 * @caret-size-large )); }       // right aligned
    > input + span:after  { border-left-color: transparent; }                                                           // right aligned
    span:after  { border-left-color: @input-border; }                                                                   // left aligned
  }

  // input-group caret alignment fixes
  .input-group-addon {
    padding: 0;

    i {
      font-style: normal;
      margin-left: @padding-base-horizontal;
      padding-right: @padding-base-horizontal;
    }

    // fix-up alignment of empty addon
    &:empty {
      padding-left: 2 * @padding-base-horizontal;
    }
  }
}
4

1 回答 1

6

它似乎.input-group > input + span:before是右对齐的一个很好的选择器。但是也会存在 box-sizing :border-box （为什么 Bootstrap 3 切换到 box-sizing:border-box？）会破坏插入符号/表格的问题。（宽度也包括 :after 和 :before？）

见：http ://bootply.com/83702

.input-group > input + span:before {
  display: inline-block;
  width: 0;
  height: 0;
  border-right: 10px solid red;
  border-top: 10px solid transparent;
  border-left: 0 dotted;
  border-bottom: 10px solid transparent;

  vertical-align: middle;
  margin-left: 2px;
  content:'';
}
于 2013-09-27T21:54:32.053 回答