Question

我对定位div有疑问。我想展示一下我想要获得的图像，但我没有足够的声誉这样做。所以，我会这样解释：

 _____________________________________
|  ____                               | 
| |img | Name             Price       |
| |____| Description      Add to cart |
|_____________________________________|

这是我的代码：

<div class="well">
    <div class="pull-left"><img src="@Url.Content("~/Content/Images/" + element.ProductId + ".jpg")" class="img-thumbnail" height="100" width="100" /></div>
    <div class="pull-left">
        <span class="pull-left">@Html.Label(element.Name) @element.Category</span>
        <span class="pull-right">@element.Price.ToString("C")</span>
    </div>
    <div class="pull-right">
        <span class="pull-left">@element.Description</span>
        <span class="pull-right">@Html.ActionLink("Do koszyka", "AddToCart", "Cart", new { element.ProductId, returnUrl = Request.Url.PathAndQuery }, new { @class = "btn btn-default" })</span>
    </div>
</div>

和html代码：

<div class="well">
    <div class="pull-left"><img src="/Content/Images/13.jpg" class="img-thumbnail" height="100" width="100" /></div>
    <div class="pull-left">
        <span class="pull-left"><label for="Dysk_SSD_Kingston_60GB_V300_SATA3">Dysk SSD Kingston 60GB V300 SATA3</label> Dyski SSD</span>
        <span class="pull-right">199,00 zł</span>
    </div>
    <div class="pull-right">
        <span class="pull-left">Kingston</span>
        <span class="pull-right"><a class="btn btn-default" href="/Cart/AddToCart?ProductId=13&amp;returnUrl=%2F">Do koszyka</a></span>
    </div>
</div>

它不按我想要的方式工作。我不知道应该改变什么。

Answer 1

你能看看吗？我在井内插了一排。并在行中创建了一个bootstrap 3列网格。

请查看以下小提琴中的代码演示 https://jsfiddle.net/YameenYasin/38gudt6s/1/

<div class="well">
<div class="row">
    <div class="col-xs-3 pull-left"><img src="/Content/Images/13.jpg" class="img-thumbnail" height="100" width="100" /></div>
    <div class="col-xs-6 pull-left">
        <span class="pull-left"><label for="Dysk_SSD_Kingston_60GB_V300_SATA3">Product Name goes here</span>
        <span class="pull-left">Product Description</span>        
    </div>
    <div class="col-xs-3 pull-right">

        <span >Price: 199,00 zł</span>
        <span><a class="btn btn-default" href="/Cart/AddToCart?ProductId=13&amp;returnUrl=%2F">Add to Cart</a></span>
    </div>
</div>

Div bootstrap定位

1 个答案: