Fatal编程技术网
  • css/
  • Css 带背景色的引导程序侧栏

Css 带背景色的引导程序侧栏

css twitter-bootstrap twitter-bootstrap-3

Css 带背景色的引导程序侧栏,css,twitter-bootstrap,twitter-bootstrap-3,background-color,Css,Twitter Bootstrap,Twitter Bootstrap 3,Background Color,我有一个使用bootstrap的简单布局，它给了我两列——一列左，一列右。使用引导的12列网格格式-左边应该是8宽，右边应该是4宽，如下所示 <div class="row"> <div class="col-md-8">Left Content</div> <div class="col-md-4">Right Content</div> </div> 左内容 正确内容 问题出

我有一个使用bootstrap的简单布局，它给了我两列——一列左，一列右。使用引导的12列网格格式-左边应该是8宽，右边应该是4宽，如下所示

<div class="row">        
    <div class="col-md-8">Left Content</div>    
    <div class="col-md-4">Right Content</div>
</div>


左内容
正确内容
问题出在哪里？如何将容器添加到行中，使内容居中，但为右侧列提供一个背景色，使其一直延伸到浏览器的边缘。因此，如果左侧背景颜色为蓝色，右侧背景颜色为粉色，则颜色会全宽分布，同时通过容器将内容保持在中心位置

你可以试试这个，它对我有用，你必须添加一个额外的css类

<div class="container col-md-12 nopadding">
     <div class="row">    
        <div class="col-md-8" style="background-color:blue;">Left Content</div>    
        <div class="col-md-4" style="background-color:pink;">Right Content</div>
     </div>
</div>




左侧内容

正确内容

css:

你可以试试这个，你可以随意改变，不需要额外的css

<div class="container col-md-12">
  <div class="row col-md-6 col-md-offset-3">    
      <div class="col-md-8" style="background-color:blue;">Left Content</div>    
      <div class="col-md-4" style="background-color:pink;">Right Content</div>
  </div>
</div>


左内容
正确内容
这里

您必须非常具体地确定宽度，这将在断点处变得非常挑剔，但这将作为一个起点：

演示：

示例容器
左侧内容-比容器col-md-8宽，因为它是全宽的8/12
正确内容
您肯定需要在断点处编写一些自定义行为，还可能希望内部容器为col-7和col-5，因为最初的col-8最终在其中非常广泛，但这些自定义取决于您……

我很惊讶，我发现只有几个问题像这样。我有一个类似的要求，我设法解决它使用的绝对定位元素和大众汽车单位的组合

基本上，包装器元素具有左侧的背景色，使其看起来像延伸到屏幕的边界，并且具有与视口相同宽度的绝对定位div延伸为右侧的背景

你可以看到它在工作

标记是这样的

<div class="wrapper"> <!-- to style bg without with messing with container margins -->
  <div class="container">
    <div class="row">
      <div class="col-md-8 left"></div>    
      <div class="col-md-4 right">
        <div class="bg"><!-- additional element that will act as background --></div>
      </div>
    </div>
  </div>
</div>
注意由于bg将挂在容器外，您需要
包装器
div或其父对象之一将其
溢出-x
属性设置为
隐藏
，否则将出现水平滚动条

如果右栏中有一些特定元素，您甚至可以使用css伪元素，如
：before
，以避免声明
bg
元素

此外，您需要设置适当的屏幕断点，以便为较小的屏幕设置样式。

轻松。
工作解决方案：

/**自定义CSS**/
身体{
背景色：#4E8FD8；
溢出x：隐藏；
}
.content、.sidebar{
边框：1px纯白；
颜色：白色；
填充：20px；
文本转换：大写；
最小高度：500px；
}
.内容{
最小高度：2000px；
}
.侧边栏：：之前{
内容：''；
位置：固定；
排名：0；
宽度：100vw；
高度：100vh；
背景：#DB4ECB；
z指数：-1；
左边距：-35px；
}
@媒体屏幕和屏幕（最大宽度：991px）{
.侧边栏：：之前{
显示：无；
}
}
/**自举网格**/
@-ms视口{
宽度：设备宽度；
}
.可见xs，
.可见sm，
.可见md，
.可见lg{
显示：无！重要；
}
.可见的xs块，
.visible xs inline，
.可见的xs内联块，
.可见的sm块，
.可见sm内联，
.可见sm内联块，
.可见md块，
.可视md内联，
.可见md内联块，
.可见的lg块，
.可视lg内联，
.可见lg内联块{
显示：无！重要；
}
@介质（最大宽度：767px）{
.可见xs{
显示：块！重要；
}
表1.1-xs{
显示：表格；
}
tr.visible-xs{
显示：表格行！重要；
}
th.visible-xs，
td.visible-xs{
显示：表格单元格！重要；
}
}
@介质（最大宽度：767px）{
.可见xs块{
显示：块！重要；
}
}
@介质（最大宽度：767px）{
.visible xs inline{
显示：内联！重要；
}
}
@介质（最大宽度：767px）{
.可见xs内联块{
显示：内联块！重要；
}
}
@介质（最小宽度：768px）和（最大宽度：991px）{
.可见sm{
显示：块！重要；
}
表1.1-sm{
显示：表格；
}
可见光-sm{
显示：表格行！重要；
}
可见光-sm，
td.visible-sm{
显示：表格单元格！重要；
}
}
@介质（最小宽度：768px）和（最大宽度：991px）{
.可见sm块{
显示：块！重要；
}
}
@介质（最小宽度：768px）和（最大宽度：991px）{
.可见sm内联{
显示：内联！重要；
}
}
@介质（最小宽度：768px）和（最大宽度：991px）{
.可见sm内联块{
显示：内联块！重要；
}
}
@介质（最小宽度：992px）和（最大宽度：1199px）{
.可见md{
显示：块！重要；
}
表1.1-md{
显示：表格；
}
tr.visible-md{
显示：表格行！重要；
}
th.visible-md，
td.visible-md{
显示：表格单元格！重要；
}
}
@介质（最小宽度：992px）和（最大宽度：1199px）{
.可见md块{
显示：块！重要；
}
}
@介质（最小宽度：992px）和（最大宽度：1199px）{
.可视md内联{
显示：内联！重要；
}
}
@介质（最小宽度：992px）和（最大宽度：1199px）{
.可见md内联块{
显示：内联块！重要；
}
}
@介质（最小宽度：1200px）{
.可见lg{
显示：块！重要；
}
表1.1-lg{
显示：表格；
}
tr.visible-lg{
显示：表格行！重要；
}
th.visible-lg，
td.visible-lg{
显示：表格单元格！重要；
}
}
@介质（最小宽度：1200px）{
.可见lg块{
显示：块！重要；
}
}
@介质（最小宽度：1200px）{
.可视lg内联{
显示：内联！重要；
}
}
@介质（最小宽度：1200px）{
.可见lg内联块{
显示：内联块！重要；
}
}
@介质（最大宽度：767px）{
.隐藏的X{
显示：无！导入

<div class="container col-md-12">
  <div class="row col-md-6 col-md-offset-3">    
      <div class="col-md-8" style="background-color:blue;">Left Content</div>    
      <div class="col-md-4" style="background-color:pink;">Right Content</div>
  </div>
</div>



<div class="container bg-grey">Example Container</div>
<div class="col-md-8 bg-info" style="height:100px">
  <div class="row">
    <div class="left-container bg-warning pull-right" style="height:50px">
      <div class="col-xs-12">Left Content - is wider than in-container col-md-8, because it's 8/12ths of full-width</div>
    </div>
  </div>
</div>
<div class="col-md-4 bg-danger" style="height:100px">
  <div class="row">
    <div class="right-container bg-success" style="height:50px">
    <div class="col-xs-12">Right Content</div>
  </div>
</div>
</div>



<div class="wrapper"> <!-- to style bg without with messing with container margins -->
  <div class="container">
    <div class="row">
      <div class="col-md-8 left"></div>    
      <div class="col-md-4 right">
        <div class="bg"><!-- additional element that will act as background --></div>
      </div>
    </div>
  </div>
</div>



/* Wrapper has the bg color of left side */
.wrapper,
.left {
  background-color: blue;
}

/* Right container */
.right {
  background-color: pink;
  position: relative; /* Let it have absolute positioned children  */
  z-index: 0;
}

.right .bg {
  background-color: pink;

  /* Following will make our bg element the same size as its parent
   and will put it behind it making it look like a background */
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  z-index: -1;

  width: 100%; // fallback for old browsers, bg will be same size as its parent
  width: 100vw; // Have the bg the same width as the screen, making the bg hang outside the screen

}



<section>
  <div class="container">
    <div class="block block_left">
      <div class="block__content">
        <p>
             С другой стороны консультация с широким активом способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям.       
             Не следует, однако забывать, что сложившаяся структура организации требуют от нас анализа системы обучения кадров, соответствует насущным потребностям.       
             Товарищи! рамки и место обучения кадров требуют от нас анализа существенных финансовых и административных условий.       
             Товарищи! реализация намеченных плановых заданий играет важную роль в формировании системы обучения кадров, соответствует насущным потребностям.       
             Идейные соображения высшего порядка, а также новая модель организационной деятельности требуют от нас анализа системы обучения кадров, соответствует насущным потребностям.       
             Разнообразный и богатый опыт постоянное информационно-пропагандистское обеспечение нашей деятельности представляет собой интересный эксперимент проверки позиций, занимаемых участниками в отношении поставленных задач.   
          </p>
          <p>
             Задача организации, в особенности же постоянный количественный рост и сфера нашей активности обеспечивает широкому кругу (специалистов) участие в формировании соответствующий условий активизации.       
             Не следует, однако забывать, что укрепление и развитие структуры позволяет выполнять важные задания по разработке модели развития.       
             Таким образом рамки и место обучения кадров требуют определения и уточнения систем массового участия.       
             Разнообразный и богатый опыт реализация намеченных плановых заданий играет важную роль в формировании дальнейших направлений развития.   
          </p>
          <p>
             Таким образом сложившаяся структура организации в значительной степени обуславливает создание модели развития.       
             Идейные соображения высшего порядка, а также дальнейшее развитие различных форм деятельности в значительной степени обуславливает создание позиций, занимаемых участниками в отношении поставленных задач.       
             Разнообразный и богатый опыт постоянное информационно-пропагандистское обеспечение нашей деятельности обеспечивает широкому кругу (специалистов) участие в формировании форм развития.       
             Повседневная практика показывает, что дальнейшее развитие различных форм деятельности способствует подготовки и реализации соответствующий условий активизации.       
             Идейные соображения высшего порядка, а также реализация намеченных плановых заданий требуют определения и уточнения систем массового участия.       
             Равным образом реализация намеченных плановых заданий позволяет выполнять важные задания по разработке систем массового участия.   
        </p>
        <p>
           Разнообразный и богатый опыт начало повседневной работы по формированию позиции представляет собой интересный эксперимент проверки новых предложений.       
           Таким образом новая модель организационной деятельности требуют от нас анализа системы обучения кадров, соответствует насущным потребностям.   
        </p>
        <p>
           С другой стороны реализация намеченных плановых заданий позволяет выполнять важные задания по разработке форм развития.       
           Товарищи! начало повседневной работы по формированию позиции требуют определения и уточнения направлений прогрессивного развития.   
        </p>
        <p>
           Таким образом сложившаяся структура организации представляет собой интересный эксперимент проверки новых предложений.       
           Повседневная практика показывает, что постоянное информационно-пропагандистское обеспечение нашей деятельности требуют определения и уточнения форм развития.
        </p>
      </div>
    </div>
    <div class="block block_right">
      <div class="block__content">
        <p>
             Таким образом сложившаяся структура организации в значительной степени обуславливает создание модели развития.       
             Идейные соображения высшего порядка, а также дальнейшее развитие различных форм деятельности в значительной степени обуславливает создание позиций, занимаемых участниками в отношении поставленных задач.       
             Разнообразный и богатый опыт постоянное информационно-пропагандистское обеспечение нашей деятельности обеспечивает широкому кругу (специалистов) участие в формировании форм развития.       
             Повседневная практика показывает, что дальнейшее развитие различных форм деятельности способствует подготовки и реализации соответствующий условий активизации.       
             Идейные соображения высшего порядка, а также реализация намеченных плановых заданий требуют определения и уточнения систем массового участия.       
             Равным образом реализация намеченных плановых заданий позволяет выполнять важные задания по разработке систем массового участия.   
        </p>
       </div>
    </div>
  </div>
</section>
<style>
body {
  overflow-x: hidden;
  margin: 0px;
  padding: 0px;
}
.container {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  font-size: 0px;
  display: flex;
  flex-wrap: wrap;
}
.block {
  display: inline-block;
  font-size: 16px;
  box-sizing: border-box;
  position: relative;
  color: white;
  vertical-align: top;
}
.block_left {
   width: 70%;
}
.block_right {
  width: 30%;
}
.block::before {
  content: '';
  width: 150vw;
  height: 100%;
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: -1;
  background: #3f80cb;
  min-height: 100vh;
}
.block_right:before {
  background: #d55bc3;
  right: auto;
  left: 0px;
}
.block__content {
  outline: 1px solid #ffffff91;
  margin: 20px;
  padding: 1px 10px;
}
@media screen and (max-width: 700px) {
  .block {
    width: 100%;
  }
  .block::before {
    min-height: 0px;
  }
}
</style>