Question

如何通过bootstrap4或原始CSS将我的完整图像放入div /卡/面板主体中？我尝试了很多方法。但我需要一个完美的方法来将我的图像和卡片放在面板主体中。示例：

<div class="col-sm-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="card">
                      <div class="card-body">
                        <div class="row">
                            <div class="col-3.8">
                                <img class="rounded" style="width: 17rem;min-height: 17rem;" src="http://localhost/upwork/public/img/<?php echo $key->news_image_name ?>">
                            </div>
                            <div class="col-8">
                                <h5 class="card-title"><?php echo $key->news_title ?></h5>
                                <h10>Posted In: <?php echo $key->news_source ?></h10></br></br>
                                <p class="card-text"><?php echo $key->news_description ?></p></br></br>
                                <a href="#" class="btn btn-primary">View Details News</a>
                            </div>
                        </div>
                      </div>
                    </div>
                </div>
            </div>

Answer 1

首先没有类 - col-3.8或col-8。您可以使用col-sm-3或col-sm-8，但根据提供的代码，我认为不需要。只需使用我更新的代码 -

＆＃13;

<div class="col-sm-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="card">
                      <div class="card-body">
                        <div class="row">
                            <div class="col-sm-12" style="position: relative;">
                                <img class="img-responsive" src="http://localhost/upwork/public/img/<?php echo $key->news_image_name ?>">
<div style="position: absolute;bottom: 0; background:#000; color: #fff;">
<h5 class="card-title"><?php echo $key->news_title ?></h5>
                                <h10>Posted In: <?php echo $key->news_source ?></h10></br></br>
                                <p class="card-text"><?php echo $key->news_description ?></p></br></br>
                                <a href="#" class="btn btn-primary">View Details News</a>
</div>
                            </div>
                        </div>
                      </div>
                    </div>
                </div>
            </div>

＆＃13;

如何在panelbody / card / div中放入完整图像？

1 个答案: