0

入力バーがボタン以外のすべてのスペースを占めるブロックレベルの入力追加を試みています。

<button>またはでこれを機能させました<span>が、タグを に切り替えると、<input>スタイリングの問題が再び発生し始めました。ただし、<input>タグは必須です。

私はフィドルを含めました - HERE

4

2 に答える 2

2

私はこれを行うことでそれを機能させました：

.input-append {
  display: table;
  width: 100%;
}
.add-on {
  display: table-cell;
  height: auto !important;
}
.input-bar {
  display: table-cell;
  width: 100%;
  border-right-style: None;
}
.well{
  padding-right: 58px;
}​
  1. 通常の CSS ではネストされたセレクターを削除できないため、ネストされたセレクターを削除しました。(ただし、Sass と LESS を使用すると可能です)。
  2. 「.add-on」セレクターに「height: auto !important」を追加しました。一般に、「!important」を使用することはベスト プラクティスではないと見なされていますが。
  3. GO!の幅である58pxのウェルにパディングライトを追加しました。ボタン、39px、および 19px のウェル パディング。

編集: @nicefinly が指摘したように、GO! の高さ。ボタンはオフのままでした。Chrome では問題は見られませんでしたが、Firefox では高さの問題がはっきりとわかりました。

したがって、彼のすべての変更に加えて、たとえばウェル クラスとアドオン クラスを変更すると、これらの標準の Bootstrap クラスが使用されているすべての場所が変更され、おそらく望ましくないことも付け加えます。

代わりに、これらすべてのカスタム クラスに個別のクラスを作成して、この特定のケースでは機能し、他の場所では意図したとおりに機能するようにします。たとえば、「add-on-button」、「well-with-button」などです。

于 2012-12-14T03:04:29.657 に答える
0

@CoderDave は、彼の提案で正しい方向に私を指摘しました - @CoderDave の答えの JSFiddle

しかし、高さが少しずれていることに気付きました。代わりに、ボタンの高さを手動で設定しました -私の回避策の JSFiddle

.input-append {
  display: table;
  width: 100%;
}
.add-on {
  display: table-cell;
  height: 30px !important;
}
.input-bar {
  display: table-cell;
  width: 100%;
  border-right-style: None;
}
.well{
  padding-right: 58px;
}
​

しかしその後...

Chrome でのテストでは、奇妙な結果が得られました (必ずしもフィドルではなく、ローカル環境で)。したがって、パディングの代わりに、margin-leftand margin-rightwhereを使用しました

margin-left = 17px上でinput .add-on

と

margin-right = -55px上で.input-bar

しかし...その後、z-index が原因で.input-barGO! がブロックされていることに気付きました。バーがフォーカスされているとき (つまり、クリックしたとき) にボタンをクリックします。

したがって、私はz-index

z-index: -1のために のwell z-index: 1ために の.input-bar z-index: 2ために.add-on

ここで最後のJSFIDDLE！

これはかなりハックなソリューションのようです。誰かがより良い解決策を持っている場合は、共有してください。

于 2012-12-14T08:52:07.413 に答える