Question

我想有一些东西（边界的东西是一张图片，文字有反色，所以很容易阅读）

请注意，图像是一个简单的div标签，它将存在于

中

    <div class = "row">
        <div class = "col-md-6">
            <h3>Title</h3>
            <p>
                Short and nice paragraph
            </p>
        </div>
    </div>

然而，我不知道从哪里开始的第一件事。我试过阅读bootstrap教程并没有提供太多。我知道我没有提供任何代码来展示我的作品，但老实说，我甚至不知道从哪里开始，或者搜索什么或做什么。所以我并不是真的要求一个完整的解决方案或任何东西，但如果你能指出我正确的方向，我会非常感激

Answer 1

Quillion，我不明白你的问题是什么。上面的代码应该几乎呈现你想要的。不过这可能会对你有所帮助：

我将代码包装在主容器.container-fluid和.card元素中，两者都可以在bootstrap文档中找到。

我刚为更宽的边框添加了一个额外的样式。你可以玩一点，应该快速得到你需要的风格。以下是笔的链接：https://codepen.io/scheinercc/pen/pdwdvx

希望有所帮助。

<style>
    .custom-border-width-3 {
        border-width: 3px;
    }
<style>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <div class="card mt-2 custom-border-width-3">
                <div class="card-body">
                    <h1>Title</h1>
                    <p>
                        Short and nice paragraph
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

你去吧

＆＃13;

          $(document).ready(function () {

              $(".cal").each(function () {
                   $(this).keyup(function () {
                    //Initialize total to 0
                        var total = 0;
                         $(".cal").each(function () {

                            if (!isNaN(this.value) && this.value.length != 0 && this.value < 4) {
                              total += parseFloat(this.value);
                              precentage = (total/21)*100;
                         }
                    });

                    $('#sum').html(total);
                    $('#prec').html(precentage.toFixed(2));
               });
          });
     });

＆＃13;

.col-md-6{
width:50%;
}

.image{
position:relative;
}



.image img{
width: 300px;
}

.text{
position:absolute;
top: 50%;
left: 0;
padding: 0 25px;
background: rgba(255,255,255,.6);
}

.text h3, .text p{
color:#f63;
}

＆＃13;

图像内的文章

2 个答案: