Feldgröße mit Symbol bootstrap Ausrichtung

Question

Ich habe ein kleines Problem mit der Ausrichtung des Symbols, wenn ich das Feld Größe anpassen möchte.

<form name="fos_user_registration_form" method="post" action="/app_dev.php/register/" id="register-form" class="mt-20 fos_user_registration_register"> 

        <div class="error"></div> 

        <div class="form-group has-icon"> 
         <input id="fos_user_registration_form_email" name="fos_user_registration_form[email]" required="required" placeholder="Adresse e-mail" class=" form-control" type="email"> 

         <span class="fa fa-envelope-o form-control-icon" aria-hidden="true"></span> 
        </div> 
        <div class="form-group has-icon"> 
         <input id="fos_user_registration_form_nom" name="fos_user_registration_form[nom]" required="required" placeholder="Nom" class=" form-control" type="text"> 

         <span class="fa fa-user form-control-icon" aria-hidden="true"></span> 
        </div> 

        <div class="form-group has-icon"> 
         <input id="fos_user_registration_form_prenom" name="fos_user_registration_form[prenom]" required="required" placeholder="Prénom" class=" form-control" type="text"> 

         <span class="fa fa-user form-control-icon" aria-hidden="true"></span> 
        </div> 
        <div class="form-group has-icon"> 
           <select id="fos_user_registration_form_gender" name="fos_user_registration_form[gender]" class="form-control form-control"><option value="0" selected="selected">Sélectionnez</option><option value="1">M</option><option value="2">F</option></select> 


         <span class="fa fa-venus-mars form-control-icon" aria-hidden="true"></span> 
        </div> 
        <div class="col-sm-12"> 
         <div class="form-group has-icon col-sm-4"> 
            <select id="fos_user_registration_form_birthday_day" name="fos_user_registration_form[birthday][day]" required="required" class="form-control form-control"><option value="" selected="selected">Jour</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select> 


          <span class="fa fa-calendar form-control-icon" aria-hidden="true"></span> 
         </div> 

         <div class="form-group has-icon col-sm-4"> 
            <select id="fos_user_registration_form_birthday_month" name="fos_user_registration_form[birthday][month]" required="required" class="form-control form-control"><option value="" selected="selected">Mois</option><option value="1">Jan</option><option value="2">Feb</option><option value="3">Mar</option><option value="4">Apr</option><option value="5">May</option><option value="6">Jun</option><option value="7">Jul</option><option value="8">Aug</option><option value="9">Sep</option><option value="10">Oct</option><option value="11">Nov</option><option value="12">Dec</option></select> 


          <span class="fa fa-calendar form-control-icon" aria-hidden="true"></span> 
         </div> 
         <div class="form-group has-icon col-sm-4"> 
            <select id="fos_user_registration_form_birthday_year" name="fos_user_registration_form[birthday][year]" required="required" class="form-control form-control"><option value="" selected="selected">Année</option><option value="1897">1897</option><option value="1898">1898</option><option value="1899">1899</option><option value="1900">1900</option><option value="1901">1901</option><option value="1902">1902</option><option value="1903">1903</option><option value="1904">1904</option><option value="1905">1905</option><option value="1906">1906</option><option value="1907">1907</option><option value="1908">1908</option><option value="1909">1909</option><option value="1910">1910</option><option value="1911">1911</option><option value="1912">1912</option><option value="1913">1913</option><option value="1914">1914</option><option value="1915">1915</option><option value="1916">1916</option><option value="1917">1917</option><option value="1918">1918</option><option value="1919">1919</option><option value="1920">1920</option><option value="1921">1921</option><option value="1922">1922</option><option value="1923">1923</option><option value="1924">1924</option><option value="1925">1925</option><option value="1926">1926</option><option value="1927">1927</option><option value="1928">1928</option><option value="1929">1929</option><option value="1930">1930</option><option value="1931">1931</option><option value="1932">1932</option><option value="1933">1933</option><option value="1934">1934</option><option value="1935">1935</option><option value="1936">1936</option><option value="1937">1937</option><option value="1938">1938</option><option value="1939">1939</option><option value="1940">1940</option><option value="1941">1941</option><option value="1942">1942</option><option value="1943">1943</option><option value="1944">1944</option><option value="1945">1945</option><option value="1946">1946</option><option value="1947">1947</option><option value="1948">1948</option><option value="1949">1949</option><option value="1950">1950</option><option value="1951">1951</option><option value="1952">1952</option><option value="1953">1953</option><option value="1954">1954</option><option value="1955">1955</option><option value="1956">1956</option><option value="1957">1957</option><option value="1958">1958</option><option value="1959">1959</option><option value="1960">1960</option><option value="1961">1961</option><option value="1962">1962</option><option value="1963">1963</option><option value="1964">1964</option><option value="1965">1965</option><option value="1966">1966</option><option value="1967">1967</option><option value="1968">1968</option><option value="1969">1969</option><option value="1970">1970</option><option value="1971">1971</option><option value="1972">1972</option><option value="1973">1973</option><option value="1974">1974</option><option value="1975">1975</option><option value="1976">1976</option><option value="1977">1977</option><option value="1978">1978</option><option value="1979">1979</option><option value="1980">1980</option><option value="1981">1981</option><option value="1982">1982</option><option value="1983">1983</option><option value="1984">1984</option><option value="1985">1985</option><option value="1986">1986</option><option value="1987">1987</option><option value="1988">1988</option><option value="1989">1989</option><option value="1990">1990</option><option value="1991">1991</option><option value="1992">1992</option><option value="1993">1993</option><option value="1994">1994</option><option value="1995">1995</option><option value="1996">1996</option><option value="1997">1997</option><option value="1998">1998</option><option value="1999">1999</option><option value="2000">2000</option><option value="2001">2001</option><option value="2002">2002</option><option value="2003">2003</option><option value="2004">2004</option><option value="2005">2005</option><option value="2006">2006</option><option value="2007">2007</option><option value="2008">2008</option><option value="2009">2009</option><option value="2010">2010</option><option value="2011">2011</option><option value="2012">2012</option><option value="2013">2013</option><option value="2014">2014</option><option value="2015">2015</option><option value="2016">2016</option><option value="2017">2017</option></select> 


          <span class="fa fa-calendar form-control-icon" aria-hidden="true"></span> 
         </div> 
        </div> 
        <div class="form-group has-icon"> 
         <input id="fos_user_registration_form_plainPassword_first" name="fos_user_registration_form[plainPassword][first]" required="required" placeholder="Mot de passe" class=" form-control" type="password"> 

         <span class="fa fa-lock form-control-icon" aria-hidden="true"></span> 
        </div> 

        <div class="form-group has-icon"> 
         <input id="fos_user_registration_form_plainPassword_second" name="fos_user_registration_form[plainPassword][second]" required="required" placeholder="Vérification" class=" form-control" type="password"> 

         <span class="fa fa-lock form-control-icon" aria-hidden="true"></span> 
        </div> 

        <div class="form-group has-icon"> 
           <select id="fos_user_registration_form_country" name="fos_user_registration_form[country]" class="form-control form-control"><option value="France">France</option></select> 


         <span class="fa fa-globe form-control-icon" aria-hidden="true"></span> 
        </div> 

        <input class="btn btn-md btn-block btn-base-1 mt-20" id="register-submit" value="Créer un compte" type="submit"> 
        <small>En cliquant sur inscription vous acceptez les 
         <a href="">conditions générales</a> de 
         Fitjiva.com. 
        </small> 
        <input id="fos_user_registration_form_mailHidden" name="fos_user_registration_form[mailHidden]" class=" form-control" type="hidden"><input id="fos_user_registration_form__token" name="fos_user_registration_form[_token]" class=" form-control" value="lRL1odxIZVJoJf_Jj3oyjWFW_KHyR8oUrRNzRKRrvGk" type="hidden"> 
</form> 

Mit diesem Code habe ich dieses Ergebnis:

Es gibt ein Problem mit dem Symbol von Feldern, die eine Schlichte Klasse.

Eine Idee zur Lösung des Problems? Weil, wenn ich die Größenklasse entferne, es Arbeit ist, aber ich will das Feld für den Geburtstag auf einer Linie.

Danke für Ihre Hilfe.

Answer 1

Endlich ändere ich meinen Code und benutze die Input-Group-Klasse. So ist der Code für einen Eingang ist:

<form> 
    <div class="form-group "> 

        <div class="controls"> 
         <div class="input-group col-sm-12"> 
          <span class="fa fa-envelope-o input-group-addon" 
            aria-hidden="true"></span> 
          <input id="fos_user_registration_form_email" name="fos_user_registration_form[email]" required="required" placeholder="Adresse e-mail" class=" form-control" type="email"> 

         </div> 
        </div> 


       </div> 

</form> 

Für align in einer Zeile der Eingabe Ich benutze diesen Code:

<div class="form-group"> 

        <div class="controls col-sm-4" style="padding: 0px;margin-bottom: 15px;"> 
         <div class="input-group"> 
          <span class="fa fa-calendar input-group-addon" aria-hidden="true"></span> 
            <select id="fos_user_registration_form_birthday_day" name="fos_user_registration_form[birthday][day]" required="required" class="form-control form-control"><option value="" selected="selected">Jour</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select> 




         </div> 
        </div> 
        <div class="controls col-sm-4"> 
         <div class="input-group"> 
          <span class="fa fa-calendar input-group-addon" aria-hidden="true"></span> 
            <select id="fos_user_registration_form_birthday_month" name="fos_user_registration_form[birthday][month]" required="required" class="form-control form-control"><option value="" selected="selected">Mois</option><option value="1">Jan</option><option value="2">Feb</option><option value="3">Mar</option><option value="4">Apr</option><option value="5">May</option><option value="6">Jun</option><option value="7">Jul</option><option value="8">Aug</option><option value="9">Sep</option><option value="10">Oct</option><option value="11">Nov</option><option value="12">Dec</option></select> 




         </div> 
        </div> 
        <div class="controls col-sm-4"> 
         <div class="input-group"> 
          <span class="fa fa-calendar input-group-addon" aria-hidden="true"></span> 
            <select id="fos_user_registration_form_birthday_year" name="fos_user_registration_form[birthday][year]" required="required" class="form-control form-control"><option value="" selected="selected">Année</option><option value="1897">1897</option><option value="1898">1898</option><option value="1899">1899</option><option value="1900">1900</option><option value="1901">1901</option><option value="1902">1902</option><option value="1903">1903</option><option value="1904">1904</option><option value="1905">1905</option><option value="1906">1906</option><option value="1907">1907</option><option value="1908">1908</option><option value="1909">1909</option><option value="1910">1910</option><option value="1911">1911</option><option value="1912">1912</option><option value="1913">1913</option><option value="1914">1914</option><option value="1915">1915</option><option value="1916">1916</option><option value="1917">1917</option><option value="1918">1918</option><option value="1919">1919</option><option value="1920">1920</option><option value="1921">1921</option><option value="1922">1922</option><option value="1923">1923</option><option value="1924">1924</option><option value="1925">1925</option><option value="1926">1926</option><option value="1927">1927</option><option value="1928">1928</option><option value="1929">1929</option><option value="1930">1930</option><option value="1931">1931</option><option value="1932">1932</option><option value="1933">1933</option><option value="1934">1934</option><option value="1935">1935</option><option value="1936">1936</option><option value="1937">1937</option><option value="1938">1938</option><option value="1939">1939</option><option value="1940">1940</option><option value="1941">1941</option><option value="1942">1942</option><option value="1943">1943</option><option value="1944">1944</option><option value="1945">1945</option><option value="1946">1946</option><option value="1947">1947</option><option value="1948">1948</option><option value="1949">1949</option><option value="1950">1950</option><option value="1951">1951</option><option value="1952">1952</option><option value="1953">1953</option><option value="1954">1954</option><option value="1955">1955</option><option value="1956">1956</option><option value="1957">1957</option><option value="1958">1958</option><option value="1959">1959</option><option value="1960">1960</option><option value="1961">1961</option><option value="1962">1962</option><option value="1963">1963</option><option value="1964">1964</option><option value="1965">1965</option><option value="1966">1966</option><option value="1967">1967</option><option value="1968">1968</option><option value="1969">1969</option><option value="1970">1970</option><option value="1971">1971</option><option value="1972">1972</option><option value="1973">1973</option><option value="1974">1974</option><option value="1975">1975</option><option value="1976">1976</option><option value="1977">1977</option><option value="1978">1978</option><option value="1979">1979</option><option value="1980">1980</option><option value="1981">1981</option><option value="1982">1982</option><option value="1983">1983</option><option value="1984">1984</option><option value="1985">1985</option><option value="1986">1986</option><option value="1987">1987</option><option value="1988">1988</option><option value="1989">1989</option><option value="1990">1990</option><option value="1991">1991</option><option value="1992">1992</option><option value="1993">1993</option><option value="1994">1994</option><option value="1995">1995</option><option value="1996">1996</option><option value="1997">1997</option><option value="1998">1998</option><option value="1999">1999</option><option value="2000">2000</option><option value="2001">2001</option><option value="2002">2002</option><option value="2003">2003</option><option value="2004">2004</option><option value="2005">2005</option><option value="2006">2006</option><option value="2007">2007</option><option value="2008">2008</option><option value="2009">2009</option><option value="2010">2010</option><option value="2011">2011</option><option value="2012">2012</option><option value="2013">2013</option><option value="2014">2014</option><option value="2015">2015</option><option value="2016">2016</option><option value="2017">2017</option></select> 




         </div> 
        </div> 
       </div> 

Vielen Dank.

Answer 2

Wenn Sie Bootstrap 4 verwenden, haben alle Spalten eine Auffüllung links und rechts mit 15px. So können Sie versuchen, den Spalten mit der Klasse col-sm-4 ein Padding mit 0 zu geben (im Bootstrap 4 die Klasse p-0).

Und auch die Spalten mit der Klasse col-sm-4 in eine Klasse row wickeln. (<div class="row"></div>)

Das Ergebnis ist, dass Ihre Symbole in den Eingabefeldern sind.

Answer 3

Ändern Sie einfach den Klassennamen col-sm-12 zu row in Ihrem Code.

Seit Klasse col-sm-4 fügen Sie zusätzliche Auffüllungen zu DOMs, die Verwendung von ihnen aus .row Tags wird ein solches Problem verursachen.

immer gesetzt Klassen in solchen Beziehungen: container/container-fluid ->row ->col-sm-4

Für komplette Anleitung von Grid-System, lesen Sie die Anleitung auf this bootstrap page.

---

P.S. Wenn Sie .col- innerhalb .col Tag anwenden möchten, können Sie es tun, indem Sie <div class="row"> ... </div> INISDE das col-sm-xx Tag hinzufügen.