图像宽度百分比 [ CSS ]

Question

我在 asp.net 页面上使用了 bootstrap。但不幸的是，我在宽度属性中使用百分比时遇到了问题。当我使用像素时，它可以工作，但是当我使用百分比时，它将不起作用。请看下图。

Answer 1

百分比是使用父元素的大小计算的。我猜你的元素嵌套的 div 没有设置宽度。

Answer 2

从 member-role 元素中删除 pull-right class 并尝试使用列来对齐项目。

Answer 3

原码

<div class="big-box">

    <div class="member-info">

        <img src="img/team/store.png" alt="admin" class="img-circle" />
        <span class="member-name"><%# Eval("cust_name") %></span>
        <div class="member-role red pull-right">

            <div class="progress">
               <div style="width: 40%;" class="progress-bar progress-bar-striped progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" ></div>     

            </div>
        </div>

    </div>

删除向右拉（感谢@hunzaboy）

<div class="big-box">

    <div class="member-info">

        <img src="img/team/store.png" alt="admin" class="img-circle" />
        <span class="member-name"><%# Eval("cust_name") %></span>
        <div class="member-role red">

            <div class="progress">
               <div style="width: 40%;" class="progress-bar progress-bar-striped progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" ></div>     

            </div>
        </div>

    </div>

感谢大家的帮助。非常感谢。 :)

图像宽度百分比 [ CSS ]

Image Width Percentage [ CSS ]

html

css

asp.net

width

bootstrap-4