html - 配置文件布局 : Table and/or CSS

Question

我正在创建个人资料页面。代码如下:

        <div class="col-md-6">
          <div class="pull-left" style="margin: 0 0 20px 20px;">
          <img src="{% if user.socialaccount_set.all.0.get_avatar_url %} {{ user.socialaccount_set.all.0.get_avatar_url }}" {% else %} {% avatar_url user 200 %}" alt="{{ user.get_full_name }}" {% endif %} width="100" height="100"/>
          </div>
          <div class="alert alert-info" style="text-align: center;width:100%;display: flex;" role="alert">
            <span style="font-size: 30px; vertical-align: middle; padding:0px 10px 0px 0px;float: left;margin: auto 0 auto auto;" class="glyphicon glyphicon-info-sign alert-info" aria-hidden="true"></span>
            <span style="font-size: 13px; vertical-align: middle;text-align: initial;margin: auto auto auto 0;" class="alert-info" role="info">                  Your profile picture (left) is used to identify you here on str8RED.com.
              To change it,
              please upload an image at least 200x200 pixels in size.  Larger images
              will be resized.  Non-square images will be centred and cropped.</span>
          </div>
          <form enctype="multipart/form-data" method="POST" action="{% url 'avatar_add' %}" role="form" class="form-inline text-center">
            {% csrf_token %}
            <div class="form-group space-above">
              <div class="input-group">
                <span class="input-group-btn">
                  <span class="btn btn-default btn-file">
                    Image Selection&hellip; <input id="id_avatar" name="avatar" type="file">
                  </span>
                </span>
                <input type="text" class="form-control" readonly>
                <span class="input-group-btn">
                  <button type="submit" class="btn btn-primary">Upload</button>
                </span>
              </div>
            </div>
          </form>
          {% if upload_avatar_form.errors %}
            <div class="alert alert-danger" style="margin: 20px 0 0 0;">
              {% for error in upload_avatar_form.avatar.errors %}
                {{ error }}<br/>
              {% endfor %}
            </div>
          {% endif %}
        </div>

以上代码的结果如下:

我想要做的是让蓝色方框恰好位于个人资料图片(当前是一个人的红色轮廓)的左侧，而图像选择仍然位于其下方。我曾尝试使用 bootstrap 中的网格，但没有成功。然后我考虑使用表格，但不确定这是否是正确的方法。

对此有任何想法将不胜感激。

Answer 1

使用 Bootstrap 进行媒体查询。将其添加到您的 CSS 文件中。

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
  .alert.alert-info {
    width: 100%;
  }
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
  .alert.alert-info {
    width: 75%;
  }
}

删除 HTML 中的宽度规范。