无法正确对齐图像和引导程序

时间:2016-11-10 14:55:11

标签: html twitter-bootstrap

尝试显示图像时遇到此问题。我尝试了一切,但我无法得到它的方式。 这是它的样子。  我希望第二行数据位于第一行数据下方,而图像就在它旁边。 https://postimg.org/image/634nny3b9/

这是该页面的一些代码

Datos personales

        <div class="col-xs-3">
          <label for="ex1">Nombre</label>
          <input class="form-control" id="ex1" type="text" value="<?= $clientes->nombre ?>" disabled="disabled">
        </div>
            <div class="col-xs-3">
              <label for="ex1">Apellido</label>
              <input class="form-control" id="ex1" type="text" value="" disabled="disabled">
            </div>
                <div class="col-xs-3">
                  <label for="ex1">Fecha de Nacimiento</label>
                  <input class="form-control" id="ex1" type="date" value="" disabled="disabled">
                </div>
                <div class="col-xs-3">

                 <img src="route/to/image" alt="" class="img-thumbnail">
        </div>
                <div class="col-xs-3">
                          <label for="ex1">Dirección</label>
                          <input class="form-control" id="ex1" type="text" value="" disabled="disabled">
                        </div>  
                    <div class="col-xs-3">
                      <label for="ex2">DNI</label>
                      <input class="form-control" id="ex2" type="int" value="" disabled="disabled">
                    </div>                  

                        <div class="col-xs-3">
                          <label for="ex2">Telefono</label>
                          <input class="form-control" id="ex2" type="text" value="" disabled="disabled">
                        </div>  


   

                            <div class="col-xs-3">
                              <label for="ex2">E-mail</label>
                              <input class="form-control" id="ex2" type="text" value="" disabled="disabled">
                            </div>
                                <div class="col-xs-3">
                                  <label for="ex2">Sexo</label>
                                  <input class="form-control" id="ex2" type="text" value="" disabled="disabled">
                                </div>

         </fieldset>

<hr>
  

块引用

1 个答案:

答案 0 :(得分:1)

你基本上可以做的是:

<div class="row>
    <div class="col-xs-9>
        <div class="row">
            <div class="col-xs-4">
            <!-- labels and inputs go here -->
            </div>
            <div class="col-xs-4">
            <!-- labels and inputs go here -->
            </div>
            <div class="col-xs-4">
            <!-- labels and inputs go here -->
            </div>
        </div>
    </div>
    <div class="col-xs-3>
        <!-- image goes here -->
    </div>
</div>

编辑:而BTW,这个问题与php完全无关。考虑删除php标记。