Bootstrap 3网格系统。嵌套的行和列

时间:2018-03-29 10:26:09

标签: html css twitter-bootstrap-3

我有以下内容: enter image description here

我想要达到的目的是在拖放图片旁边找到正确的文字。

这是我的代码:

    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
      <div class="row row-no-padding">
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
          <div class="form-group col-xs-12 col-md-12">
            <label for="image" class="control-label">Imagen de la Unidad</label>
            <div style="" class="dropzone admin-dropzone" id="imageDropzone"></div>
          </div>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
          <p>
            Tamaño recomendado: 135 x 135 px<br>
            Peso recomendado: menor a 100 kb<br>
            Formato recomendado: PNG
          </p>
        </div>
      </div>
    </div>

我尝试在嵌套列上使用col偏移,但只需将列向右移动并将其放在“下一行”上。

1 个答案:

答案 0 :(得分:0)

似乎您的HTML代码的bootstrap row和col格式错误。 你应该总是把&#34; ..- col - ..&#34;行类中的类不在其他&#34; ..- col - ..&#34;。

&#13;
&#13;
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>
<body>
<div class=row>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
    <div class="row">
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <label for="image" class="control-label">Imagen de la Unidad</label>
      </div>
    </div>
      <div class="row row-no-padding">
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 form-group">          
            <div style="WIDTH:120PX;HEIGHT:120PX;BORDER: 1PX SOLID; background-color:black" class="dropzone admin-dropzone" id="imageDropzone"></div>              
        </div>        
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 form-group">          
            Tamaño recomendado: 135 x 135 px<br>
            Peso recomendado: menor a 100 kb<br>
            Formato recomendado: PNG
        </div>
      </div>
      </div>
</div>
</body>
&#13;
&#13;
&#13;