html - div中的引导间距项目

Question

您好，我想知道如何将值 2 放在值 1 旁边，并留出一点间距，以及如何根据按钮的大小设置文本 ilipsum

我的代码：

一个

    <div className=" col-md-6"> Image Preview</div>


    <div className=" col-md-6 ">
    <div class="container h-100">
        <div class="row align-items-center h-100">
            <div class="col-6 mx-auto">
                <div class="">
                    <h4>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h4>
                    <p>Cód (000000000003044425)</p>
                    <div class="values">
                        <h1>VALUE 1</h1>
                        <p>VALUE 2</p>
                    </div>
                </div>
                <button className="mt-3 filterbt btn btn-outline-success waves-effect"> Comprar</button>
                <hr/>
            </div>
        </div>
    </div>
    </div>
</div>

标签： htmlreactjsbootstrap-4

Answer 1

display : inline只需像这样向两个元素添加属性

.values h1, .values p {
    display: inline;
}

.values p{
  margin-left: 5px;
}

工作小提琴