代码之家 › 专栏 › 技术社区 › Milan Bastola

如何在引导程序中生成背景和左右间距不同的两列

bootstrap-4 twitter-bootstrap css html

Milan Bastola · 技术社区 · 6 年前

我想让网站的顶栏像这样:

第一列应该有颜色-1。第二列应该有颜色-2 在这些柱子之间应该有一个角度。

所以我试着这样:

这里是HTML代码: 。

<section class=“topbar”> <div class=“container fluid”> <DIV class=“row”> <DIV class=“col-12 col-md-6 left”> <P>欢迎使用远程自动诊断</P> </DIV> <DIV class=“col-12 col-md-6 right”> </DIV> </DIV> </DIV> </section> 这里是css:。 .topbar{ 背景:F41004; 填料:5px; 颜色:fff; 线高:30px; } .顶杆.左{ 背景:00F; } .Topbar.Left:之后{ 内容:“”; 显示:块; 宽度:100px; 高度:200%; 背景:蓝色; 位置:绝对; 右:20px; 顶部:10px; 变换:倾斜(-45度); } 它给出这样的结果: 如您所见,由于容器和.topbar背景的显示,有左右填充。如何制作。左背景色从左开始。当我使用容器流体时,容器左右填充物会移除,如下所示: . 第一列应该有颜色-1。第二列应该有颜色-2 在这些柱子之间应该有一个角度。所以我试着这样做: 以下是HTML代码: <section class="topbar"> <div class="container-fluid"> <div class="row"> <div class="col-12 col-md-6 left"> <p>Welcome to Remote Auto Diagnostics</p> </div> <div class="col-12 col-md-6 right"> </div> </div> </div> </section> 这是CSS: .topbar { background: #f41004; padding: 5px; color: #fff; line-height: 30px; } .topbar .left { background: #00f; } .topbar .left:after { content: ""; display: block; width: 100px; height: 200%; background: blue; position: absolute; right: -20px; top: -10px; transform: skew(-45deg); } 结果如下: 如您所见,由于容器和.topbar背景的显示,有左右填充。如何制作。左背景色从左开始。当我使用容器流体时,容器左右填充物会移除,如下所示:

2 回复 | 直到 6 年前

David Liang 6 年前

我使用了不同的方法:而不是使用 :after 和skew that content,我只是直接用蓝色背景倾斜“left”,然后倾斜“left”的content back.

HTML

</DIV> 菜单 </section>

CSS

背景:F41004; 线高:2Rem; 变换:倾斜(-45度); } 变换:倾斜(45度);


   

W“左”的内容返回。

http://jsfiddle.net/aq9Laaew/81233/

HTML

<section class="topbar">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12 col-md-6">
                <div class="skewed">
                    <div class="content">
                        Welcome to Remote Auto Diagnostics
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6">
                Menu
            </div>
        </div>
    </div>
</section>




.topbar {
    background: #f41004;
    color: #fff;
    line-height: 2rem;
}

.topbar .skewed {
    background-color: #00f;
    transform: skew(-45deg);
    margin-left: -2rem;  /* this offset margin-left = padding-left */
}

.topbar .skewed .content {
    padding-left: 2rem;  /* this padding-left = offset margin-left */
    transform: skew(45deg);
}






我想你不想在小屏幕上看到歪斜效果。因此,我建议您不要使用内置的容器、行和列,而是直接使用flex box设置顶栏的样式,这样您可以拥有更多的控件。

caiovisk 6 年前

https://css-tricks.com/css3-gradients/

background: linear-gradient(135deg, blue 50%, red 50%);

*, *:before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.topbar {
    /*background: #f41004;*/
    background: linear-gradient(135deg, blue 50%, red 50%);
    color: #fff;
    padding: 5px;
    line-height: 30px;
}

.topbar .left {
  position: relative;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<section class="topbar">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 col-xs-6 left">
        <p>Welcome to Remote Auto Diagnostics</p>
      </div>
      <div class="col-12 col-xs-6 right">
      </div>
    </div>
  </div>
</section>