現在、次のようなナビゲーション バーがあります: http://bootply.com/78239
改行を作成せずに、「検索」テキスト入力の幅を最大化したい (つまり、「クリア」リンクが「概要」リンクでタイトになる)。
CSS と Web デザインの基本的な経験しかありません。" " トリックについて何かを読みましoverflow: hiddenたが、対象の要素の右側にさらに要素がある場合の使用方法がわかりません。
ありがとう
編集：
部分的な解決策は、 http://bootply.com/78247のように、ケースごとに幅を「手動で」設定することです。
@media (max-width: 767px) {
#searchbar > .navbar-form {
width: 100%;
}
}
@media (min-width: 768px) and (max-width: 991px) {
#searchbar > .navbar-form {
width: 205px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
#searchbar > .navbar-form {
width: 425px;
}
}
@media (min-width: 1200px) {
#searchbar > .navbar-form {
width: 625px;
}
}
ただし、メニューのテキストが「動的」である場合 (たとえば、「Hello ユーザー名」が含まれている場合)、このソリューションは機能しません。
メニューのテキストの幅に制限があると仮定しても、大きな問題ではないと思います。これらの幅を手動で計算/テストするのは面倒です。自動的にそれを行うためのきちんとした方法があるかどうか知りたいだけです。