表格內聯和水平與圖像

我想編程一個混合形式，水平和內聯，與圖像，但我的bootstrap不幫我。表格內聯和水平與圖像

以下是我有：

下面是我想：

最後，代碼：

<form class='form-horizontal' method='post' enctype="multipart/form-data"> 
       <div class='form-group'> 
        <label for='foto' class='sr-only'>Foto</label> 
        <img class='fotoassociado' src='../../<?php if($sqlcmd->Foto == '') {echo 'photos/no_photo.jpg';} else {echo $sqlcmd->Foto;} ?>' /> 
        <input type='file' class='form-control' name='foto' id='foto' /> 
       </div> 
       <div class='form-group'> 
        <label for='nome' class='sr-only'>Nome</label> 
        <input type='text' class='form-control' name='nome' id='nome' value='<?php echo $sqlcmd->Nome; ?>' /> 
       </div> 
       <div class='form-group'> 
        <label for='email' class='sr-only'>E-mail</label> 
        <input type='email' class='form-control' name='email' id='email' value='<?php echo $sqlcmd->Email; ?>' /> 
       </div> 
       <div class='form-group'> 
        <label for='rg' class='sr-only'>RG</label> 
        <input type='rg' class='form-control rg' name='rg' id='rg' value='<?php echo $sqlcmd->RG; ?>' /> 
       </div> 
       <div class='form-group'> 
        <label for='cpf' class='sr-only'>CPF</label> 
        <input type='cpf' class='form-control cpf' name='cpf' id='cpf' value='<?php echo $sqlcmd->CPF; ?>' /> 
       </div> 
       <div class='form-group'> 
        <label for='TelRes' class='sr-only'>Residencial</label> 
        <input type='text' class='form-control' name='TelRes' id='TelRes' value='<?php echo $sqlcmd->TelResidencial; ?>' /> 
       </div> 
       <div class='form-group'> 
        <label for='TelCom' class='sr-only'>Comercial</label> 
        <input type='text' class='form-control' name='TelCom' id='TelCom' value='<?php echo $sqlcmd->TelComercial; ?>' /> 
       </div> 
       <div class='form-group'> 
        <label for='TelCel' class='sr-only'>Celular</label> 
        <input type='text' class='form-control' name='TelCel' id='TelCel' value='<?php echo $sqlcmd->TelCelular; ?>' /> 
       </div> 
      </form>

來源

2016-09-26 Gabriel Silva

form.form-horizontal { 
 
    float: right; 
 
    width: 83%; 
 
}

<head> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
     </head> <body> 
 
    <img class='fotoassociado' src='https://s3.amazonaws.com/cloud.ohloh.net/attachments/72914/favicon_med.png' /> 
 
<form class='form-horizontal' method='post' enctype="multipart/form-data"> 
 
       <div class='form-group' style="width: 80%;"> 
 
        <label for='foto' class='sr-only'>Foto</label> 
 
        <input type='file' class='form-control' name='foto' id='foto' /> 
 
       </div> 
 
       <div class='form-group'style="width: 80%;"> 
 
        <label for='nome' class='sr-only'>Nome</label> 
 
        <input type='text' class='form-control' name='nome' id='nome' value='name' /> 
 
       </div> 
 
       <div class='form-group'style="width: 40%;display: -webkit-inline-box;"> 
 
        <label for='email' class='sr-only'>E-mail</label> 
 
        <input type='email' class='form-control' name='email' id='email' value='Email' /> 
 
       </div> 
 
       <div class='form-group' style="width: 40%;display: -webkit-inline-box;"> 
 
        <label for='rg' class='sr-only'>RG</label> 
 
        <input type='rg' class='form-control rg' name='rg' id='rg' value='RG' /> 
 
       </div> 
 
       <div class='form-group' style="width: 30%;display: -webkit-inline-box;"> 
 
        <label for='cpf' class='sr-only'>CPF</label> 
 
        <input type='cpf' class='form-control cpf' name='cpf' id='cpf' value='cpf' /> 
 
       </div> 
 
       <div class='form-group' style="width: 30%;display: -webkit-inline-box;"> 
 
        <label for='TelRes' class='sr-only'>Residencial</label> 
 
        <input type='text' class='form-control' name='TelRes' id='TelRes' value='TEl' /> 
 
       </div> 
 
       <div class='form-group' style="width: 30%;display: -webkit-inline-box;"> 
 
        <label for='TelCom' class='sr-only'>Comercial</label> 
 
        <input type='text' class='form-control' name='TelCom' id='TelCom' value='telc' /> 
 
       </div> 
 
       <div class='form-group'> 
 
        <label for='TelCel' class='sr-only'>Celular</label> 
 
        <input type='text' class='form-control' name='TelCel' id='TelCel' value='telcal' /> 
 
       </div> 
 
      </form> 
 
</body>

來源

2016-09-26 21:01:42

幫助！謝謝！ –

嘗試有，圖像和您想要的內標標籤<span> This可能有幫助。

來源

2016-09-26 20:36:16 OSMadeIT

試着浮動圖像。例如：

.fotoassociado { 
    float: left; 
}

或者，如果你想要的是整個表單組，那麼你將會把那整個DIV浮動離開，通過選擇第一種形式，組...

.form-group:first-of-type { 
    float: left; 
}

或加入一個額外的班級。

<div class='form-group float-left'> 

.float-left { 
    float: left; 
}

來源

2016-09-26 20:40:46 theJoi

表格內聯和水平與圖像

回答

相關問題