Question

我正在尝试将图像放入Bootstrap面板（附加图像）中：

HTML代码：

<div class="panel panel-default col-md-10 col-md-offset-1">
    <div class="panel-body">
        <div class="row">
            <div class="col-md-6">
                <label> {{DisplayNickname}}</label>
            </div>
            <img src="{{DisplayPhoto}}" class="pull-right img-responsive" alt="user photo"> 
        </div>
        <font size="4" id=rating_d >Rating: </font>
        <font size="4" id=rating_d> {{DisplayRating | number : 2}}                        </font>
        <br><br>
        <font size="4">Description:</font>
        <font size="4" id=details>{{DisplayDescription}}</font>

    </div> 
</div>

CSS代码：

{
    width: 150px;
    height: 150px;
}

它正在使用position:absolute，但它没有响应。这样做的正确方法是什么？

Answer 1

也许这会起作用

<img src="{{DisplayPhoto}}" class="pull-right img-responsive" alt="user photo" width="150">

如果这不起作用试试这个

 <div style="width:150px;"><img src="{{DisplayPhoto}}" class="pull-right img-responsive" alt="user photo" ></div>

Answer 2

为什么不将图像放在网格列中呢？

<div class="panel panel-default col-md-10 col-md-offset-1">
    <div class="panel-body">
        <div class="row">
            <div class="col-md-10">
                <label> {{DisplayNickname}}</label>
            </div>
          <div class="col-md-2">
            <img src="//placehold.it/200" class="pull-right img-responsive" alt="user photo"> 
          </div>
        </div>
        <font size="4" id=rating_d >Rating: </font>
        <font size="4" id=rating_d> {{DisplayRating | number : 2}}</font>
        <br><br>
        <font size="4">Description:</font>
        <font size="4" id=details>{{DisplayDescription}}</font>
    </div> 
</div>

http://bootply.com/dj5qbgC2Kf

此外，不推荐使用HTML字体标记（仅供参考）

在引导板内的响应图像

2 个答案: