div bootstrap 定位答案

【问题标题】：Div bootstrap positioningdiv bootstrap 定位
【发布时间】：2015-03-04 06:12:20
【问题描述】：

我在定位 divs 时遇到问题。我想展示我想要获得的图像，但我没有足够的声誉来这样做。所以，我会这样解释：

 _____________________________________
|  ____                               | 
| |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>

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

【问题讨论】：

如果它“不起作用”，让我们知道实际问题是什么。告诉我们您尝试解决的问题以及为什么您的解决方案不起作用。此外，如果您只坚持前端部分并为我们提供渲染的 html 而不是未解析的 Razor 视图，这将有所帮助。
你的意思是这样的？ bootply.com/BuMrShadVw
太棒了！现在看起来确实不错，但是有没有机会把名字和价格放在同一级别？
立即尝试。去掉pull-right，真的不喜欢它。
删除 pull-right 不起作用，网站 bootply.com/BuMrShadVw 也不起作用

标签： asp.net-mvc html twitter-bootstrap

【解决方案1】：

你能检查一下吗？我在井中插入了一行。并在行中创建了一个引导 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>

【讨论】：

感谢您的回复！但是它适用于低分辨率，在 1920x1080 中所有元素都处于同一级别。