ввод ширины в Bootstrap 3

в начальной загрузке 3, управление шириной ввода может быть вызовом. В то время как документация предлагает использование класса .col-lg-x, это решение имеет ограничения.

исходный выпуск:

исходный вопрос, вызванный неспособностью установить ширину ввода с использованием .col-lg-x, не влияя на макет контейнера. Этот класс может быть применен только к самому контейнеру, что приводит к нежелательным вопросам макета.

Решение:

Практическое решение заключается в завершении каждой входной группы в его собственную строку. Таким образом, класс .col-lg-x может быть применен к отдельным группам, контролируя их ширину при поддержании общей структуры формы.

пример кода:

    
My Form
    
How to make these input fields small and retain the layout.
    

        

            

                Name
                
            
        

        

            

                Email
                
            
        
        

            Submit
        
    

примечание:

Для достижения согласованного размера по разным размерам экрана класс .col-XS-5 может быть включен для меньших экранов. Удаление этого не повлияет на общую функциональность.

Заключение:

, обернув входные группы в отдельных строках и используя класс .col-lg-x, разработчики могут эффективно управлять шириной ввода в начальной загрузке без приоритетов в системах сетки или пользовательских классов CSS.