形成内联和水平与图像

时间:2016-09-26 20:23:03

标签: html css twitter-bootstrap

我试图使用图像编写水平和内联的混合形式,但我的引导程序并没有帮助我。

以下是我所拥有的: enter image description here

这就是我想要的: enter image description here

最后,代码:

<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>

3 个答案:

答案 0 :(得分:1)

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>

答案 1 :(得分:0)

  

在标记<span>下尝试使用内嵌的图片和标签   This可能有帮助。

答案 2 :(得分:0)

尝试浮动图像。例如:

In [135]: %timeit (jez(df))
100 loops, best of 3: 3.51 ms per loop

In [136]: %timeit (maxu(df))
100 loops, best of 3: 6.21 ms per loop

def jez(df):
    df1 = df.Price.groupby([df['State'],df['# of Boxes'],pd.cut(df['Price'], bins=[0,15,30])]).size().unstack(fill_value=0)
    return  df1.div(df1.sum(1), axis=0)

def maxu(df):    
    pvt = df.assign(bins=pd.cut(df.Price, [0,15,30])).pivot_table(index=['State','# of Boxes'], columns='bins', aggfunc='size', fill_value=0)
    return pvt.apply(lambda x: x/pvt.sum(1))

或者,如果您想要整个表单组,那么通过选择第一个表单组,您将使整个div浮动,...

.fotoassociado {
    float: left;
}

或添加额外的课程。

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