Question

好的，所以我试图使用Bootstrap重新创建这个页面，但是我在这里被卡住了。

我的两个问题是：

这些行应该使用哪个html元素？
如何将12列布局分成8个相等的部分？

代码示例：

<div class="container" style="margin-top: 3%; ">
    <div class="row">
        <div class="col-xs-6 col-xs-offset-3">
            <div class="row">
                <div class="col-xs-6">
                    <div class="form-group">
                        <input type="text" class='form-control' placeholder="First Name">
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="form-group">
                        <input type="text" class='form-control' placeholder="Last Name">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <input type="text" class='form-control' placeholder="Display name">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <input type="text" class='form-control' placeholder="Email Address">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-6">
                    <div class="form-group">
                        <input type="password" class='form-control' placeholder="Password">
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="form-group">
                        <input type="password" class='form-control' placeholder="Confirm Password">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-3">
                    <button class="btn btn-secondary">I Agree</button>
                </div>
                <div class="col-xs-9">
                    <p>
                        By clicking <span class="label label-primary">Register</span> you agree to the <a href=#>Terms and Conditions</a> set out by this site, including our Cookie Use
                    </p>
                </div>
            </div>

            <div class="row">

            </div>

            <div class="row" style="">
                <div class="col-xs-6">
                    <button class="btn btn-primary btn-block" style="font-weight: bold;">Register</button>
                </div>
                <div class="col-xs-6">
                    <button class="btn btn-success btn-block" style="font-weight: bold; ">Sign In</button>
                </div>
            </div>

        </div>
    </div>
</div>

Answer 1

另一种方法是将行分成两部分，每半部分分成四部分，如下所示：

<div class="row">
    <div class="col-xs-6>
        <div class="row">
            <div class="col-xs-3></div>
            <div class="col-xs-3></div>
            <div class="col-xs-3></div>
            <div class="col-xs-3></div>
        </div>
    </div>
    <div class="col-xs-6">
        <div class="row">
            <div class="col-xs-3></div>
            <div class="col-xs-3></div>
            <div class="col-xs-3></div>
            <div class="col-xs-3></div>
        </div>
    </div>
</div>

所以你将有八个相等的部分，并将保存包装。

这些行应该使用哪个html元素 - 在这里你可以尝试使用div，span，甚至hr。试一试。：）

Answer 2

试试这个

<div class="row">
  <div class="col-xs-2></div>
  <div class="col-xs-8">{YOUR COLORS HERE}</div>
  <div class="col-xs-2></div>
</div>

您可以将颜色用作图像或包装在容器中的一组div，使它们始终在同一行上浮动。

 <div style="position:relative;display:block;width:100%;height:16px">
  <div style="position:relative;display:inline-block;width:12.5%;background-color:red"></div>
  <div style="position:relative;display:inline-block;width:12.5%;background-color:blue"></div>
  <div style="position:relative;display:inline-block;width:12.5%;background-color:green"></div>
  <div style="position:relative;display:inline-block;width:12.5%;background-color:orange"></div>
  <div style="position:relative;display:inline-block;width:12.5%;background-color:teal"></div>
  <div style="position:relative;display:inline-block;width:12.5%;background-color:cyan"></div>
  <div style="position:relative;display:inline-block;width:12.5%;background-color:purple"></div>
  <div style="position:relative;display:inline-block;width:12.5%;background-color:black"></div>
 </div>

这将为你在彩色行的两边提供相同的填充:)希望这对你有用。此外，您可以对所有行执行相同操作，以使所有内容像图像一样对齐，只需稍微填充并仍然居中。或者将行分成2（6），然后将每行分成4（3）

Answer 3

试试这个

<div class="row">
    <div class="row col-xs-3">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
    </div>
    <div class="row col-xs-3">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
    </div>
    <div class="row col-xs-3">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
    </div>
    <div class="row col-xs-3">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
    </div>
    <div class="row col-xs-3">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
    </div>
</div>

或者

<style>
.colorbar{
    display: inline-block;
    margin: -2px;
    width: 12.5%;
    height: 10px;
}
/*add some color*/
</style>
<div class="row">
    <span class="colorbar"></span>
    <span class="colorbar"></span>
    <span class="colorbar"></span>
    <span class="colorbar"></span>
    <span class="colorbar"></span>
    <span class="colorbar"></span>
    <span class="colorbar"></span>
    <span class="colorbar"></span>
</div>

Answer 4

我用这种风格最简单的方法是使用HTML5 Canvas 所以我写了这段代码：

<!DOCTYPE html>
<html>

<head>
    <style type="text/css">

        #myCanvas {
            width: 500px;
        }

    </style>
</head>

<body>

    <canvas id="myCanvas" width="800" height="20" >Your browser does not support the HTML5 canvas tag.</canvas>

    <script>
        var c = document.getElementById("myCanvas");
        var line1 = c.getContext("2d");
        line1.beginPath();
        line1.moveTo(0,0);
        line1.lineTo(100,0);
        line1.lineWidth = 20;
        line1.strokeStyle = "#6FCCAC";
        line1.stroke();

        var line2 = c.getContext("2d");
        line2.beginPath();
        line2.moveTo(100,0);
        line2.lineTo(200,0);
        line2.lineWidth = 20;
        line2.strokeStyle = "#9830B5";
        line2.stroke();

        var line3 = c.getContext("2d");
        line3.beginPath();
        line3.moveTo(200,0);
        line3.lineTo(300,0);
        line3.lineWidth = 20;
        line3.strokeStyle = "#B55C59";
        line3.stroke();

        var line4 = c.getContext("2d");
        line4.beginPath();
        line4.moveTo(300,0);
        line4.lineTo(400,0);
        line4.lineWidth = 20;
        line4.strokeStyle = "#6A8ED2";
        line4.stroke();

        var line5 = c.getContext("2d");
        line5.beginPath();
        line5.moveTo(400,0);
        line5.lineTo(500,0);
        line5.lineWidth = 20;
        line5.strokeStyle = "#C2C153";
        line5.stroke();

        var line6 = c.getContext("2d");
        line6.beginPath();
        line6.moveTo(500,0);
        line6.lineTo(600,0);
        line6.lineWidth = 20;
        line6.strokeStyle = "#00C2AE";
        line6.stroke();

        var line7 = c.getContext("2d");
        line7.beginPath();
        line7.moveTo(600,0);
        line7.lineTo(700,0);
        line7.lineWidth = 20;
        line7.strokeStyle = "#79C257";
        line7.stroke();

        var line8 = c.getContext("2d");
        line8.beginPath();
        line8.moveTo(700,0);
        line8.lineTo(800,0);
        line8.lineWidth = 20;
        line8.strokeStyle = "#D5DB22";
        line8.stroke();
    </script>

</body>
</html>

如果您想了解如何使用Canvas我总是提供这些网站：

html5canvastutorials
W3 Schools
MDN
但是为了解释我的代码...您在style标记中看到head标记。正如你应该得到的那样，代码标识画布真实width。当我说真正的宽度意味着它与你在canvas标签中看到的width不同时。我们在canvas标签中使用的width和height只是有一个工作区来设置图形的点，如填充或描边。每个十六进制代码都是线条颜色。

希望它会有所帮助......

在12格引导布局中拟合8列布局？

4 个答案: