Поиск ввода с иконкой Bootstrap 4 с закругленным текстовым полем

Вы можете использовать словари для этого. Словари - это хранилища ключей и ценностей.

>>> dct = {'x': 1, 'y': 2, 'z': 3}
>>> dct
{'y': 2, 'x': 1, 'z': 3}
>>> dct["y"]
2

Вы можете использовать имена переменных ключей для достижения эффекта переменных переменных без риска для безопасности.

>>> x = "spam"
>>> z = {x: "eggs"}
>>> z["spam"]
'eggs'

В тех случаях, когда вы думаете сделать что-то вроде

var1 = 'foo'
var2 = 'bar'
var3 = 'baz'
...

список может быть более подходящим, чем dict. Список представляет упорядоченную последовательность объектов с целыми индексами:

l = ['foo', 'bar', 'baz']
print(l[1])           # prints bar, because indices start at 0
l.append('potatoes')  # l is now ['foo', 'bar', 'baz', 'potatoes']

Для упорядоченных последовательностей списки удобнее, чем dict с целыми ключами, потому что списки поддерживают итерацию в порядке индекса, slicing , append и другие операции, которые потребуют неудобного управления ключами с помощью dict.

1
задан Khalil 24 March 2019 в 02:11
поделиться

1 ответ

Вот решение только для Bootstrap ...

Используйте отрицательное поле, используя , чтобы сдвинуть кнопку влево:

 <div class="input-group">
     <input class="form-control py-2 rounded-pill mr-1 pr-5" type="search" value="search">
     <span class="input-group-append">
         <button class="btn rounded-pill border-0 ml-n5" type="button">
               <i class="fa fa-search"></i>
         </button>
     </span>
 </div>

Это также работает с использованием input-group-text или с использованием метода сетки col-auto, описанного в [ 114] мой другой ответ :

    <div class="row no-gutters mt-3 align-items-center">
        <div class="col-4">
            <input class="form-control border-secondary rounded-pill pr-5" type="search" value="search" id="example-search-input2">
        </div>
        <div class="col-auto">
            <button class="btn btn-outline-light text-dark border-0 rounded-pill ml-n5" type="button">
                <i class="fa fa-search"></i>
            </button>
        </div>
    </div>

https://www.codeply.com/go/cDQQcNY8kP

0
ответ дан Zim 24 March 2019 в 02:11
поделиться
Другие вопросы по тегам:

Похожие вопросы: