Question

我想使用简单的html，css代码在Magento 2静态块中添加响应式2或3 bootstarp列。我使用Magento2 FreeGo主题。当我在链接布局时链接引导程序文件时，请给我最好的解决方案。

我想在Magento静态块中使用以下简单代码Form Ui。

<div class="container">
<div class="row" style="border: 1px; border-style: solid; padding: 20px; 
background-color: #f5f5f5;
border-color: #dedede;">
<div class="col-sm-6">
<h3>Acrylic</h3>
<div class="form-group">
Material
<select class="form-control" id="sel1">
<option>Choose an Option...</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="form-group">
Thickness in mm 
<select class="form-control" id="sel1">
<option>Choose an Option...</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="form-group">
Type
<select class="form-control" id="sel1">
<option>Choose an Option...</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div style="margin-bottom: 30px; margin-top: 30px;">
Product
<input type="file" class="form-control-file" id="">
</div>
<div>
<button type="submit" class="btn btn-info">Add to Cart</button>
<button type="submit" class="btn btn-info">Close</button>
</div>
</div>
<div class="col-sm-6">
<h3>Product</h3>
<img src="http://thecuttingcenter.com/staging/pub/media/wysiwyg/home/blog-    
1.png" class="img-responsive">
</div>
</div>
</div>

Answer 1

就这样：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Title</title>
    <style>
        .a {
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
        }

        .b {
            border: 1px;
            border-style: solid;
            padding: 20px;
            background-color: #f5f5f5;
            border-color: #dedede;
        }
    </style>
</head>

<body>
    <div>
        <div class="a">
            <div class="b">
                <h3>Acrylic</h3>
                <div>
                    Material
                    <select class="form-control" id="sel1">
                        <option>Choose an Option...</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                    </select>
                </div>
                <div class="form-group">
                    Thickness in mm
                    <select class="form-control" id="sel1">
                        <option>Choose an Option...</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                    </select>
                </div>
                <div class="form-group">
                    Type
                    <select class="form-control" id="sel1">
                        <option>Choose an Option...</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                    </select>
                </div>
                <div>
                    Product
                    <input type="file" class="form-control-file" id="">
                </div>
                <div>
                    <button type="submit" class="btn btn-info">Add to Cart</button>
                    <button type="submit" class="btn btn-info">Close</button>
                </div>
            </div>
            <div class="b">
                <h3>Product</h3>
                <img src="http://thecuttingcenter.com/staging/pub/media/wysiwyg/home/blog-    
        1.png" class="img-responsive">
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>

</html>

https://jsfiddle.net/sugandhnikhil/9nu5j103/

如何在magento 2页面中添加2列

1 个答案: