Fatal编程技术网
  • html/
  • Html 如何在引导列之间留出空间？

Html 如何在引导列之间留出空间？

html css twitter-bootstrap

Html 如何在引导列之间留出空间？,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我正在尝试使用Bootstrap创建一个网站，当我尝试将两列放在一起时（它们一起出现在Bootstrap中允许的12列中），它们只是挤在一起。我尝试在其中一列中添加一个边距，但这只会导致较小的列换行，并最终位于较大的列下 <div class="container"> <div class="row"> <div class="col-sm-8s"> <div class="featuredPost"> &l

我正在尝试使用Bootstrap创建一个网站，当我尝试将两列放在一起时（它们一起出现在Bootstrap中允许的12列中），它们只是挤在一起。我尝试在其中一列中添加一个边距，但这只会导致较小的列换行，并最终位于较大的列下

<div class="container">
  <div class="row">
    <div class="col-sm-8s">
      <div class="featuredPost">
        <h2>Featured Post <hr></h2>
        <img src="Images/placeholderImg.jpg" alt="Featured Image">
        <p>
          Portland aesthetic cardigan cloud bread brooklyn food truck blog leggings quinoa street art franzen. Fixie swag artisan ennui vaporware cred. Church-key direct trade neutra try-hard tilde typewriter selfies butcher trust fund. Aesthetic iceland small batch ugh health goth you probably haven't heard of them glossier fixie before they sold out fingerstache knausgaard cloud bread slow-carb. Man bun gluten-free sartorial, thundercats blog man braid banjo. Skateboard poke hot chicken pickled, tote bag tacos 90's..<a href="#">Read More &raquo;</a>
        </p>
      </div>
    </div>

    <aside class="authorBio col-sm-4">

      <div class="widget">
        <div class="row">
          <img class="col-sm-6" src="Images/AimeeAvatar.jpg" alt="Avatar">
          <h1 class="col-sm-6">Aimée LeVally</h1>
        </div>
        <hr>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit,
          sed do eiusmod tempor incididunt ut labore et dolore magna
          aliqua. Ut enim ad minim veniam, quis nostrud exercitation
          ullamco laboris nisi ut aliquip ex ea commodo consequat.
          Duis aute irure dolor in reprehenderit in voluptate velit
          esse cillum dolore eu fugiat nulla pariatur.
        </p>
      </div><!-- widget -->

    </aside>
  </div><!-- row -->
</div>


.authorBio {
background-color: #fff4e8;
padding: 15px 50px 30px 50px;
text-align: justify;
border: 5px solid #f7ddc0;
}

.authorBio h1 {
text-align: justify;
color: #ad4b34;
}

.authorBio img {
width: 50%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}

.featuredPost {
background-color: #fff4e8;
padding: 15px 50px 30px 50px;
text-align: justify;
border: 5px solid #f7ddc0;
}

.featuredPost img {
width: 100%;
padding: 0 0 0 0;
margin: 0;
}

.featuredPost p {
padding-top: 25px;
}


特色帖子


波特兰美学羊毛衫云面包布鲁克林食品卡车博客绑腿奎奴亚藜街艺术弗兰森。修理工行头技工厌倦了蒸汽工的工作。Church key direct trade neutra try hard tilde打字机自拍屠夫信托基金。美感冰岛小批量ugh health goth你可能还没听说过他们在卖光手指之前就有光泽修复剂Stache knausgaard cloud bread slow carb。男士包子无麸质服装，霹雳猫博客男士编织班卓琴。滑板戳泡鸡，手提袋墨西哥玉米卷90年代。。


莱瓦利酒店



Lorem ipsum dolor sit amet，奉献精英，
劳工和大型企业的临时投资
阿利夸。我们需要一个最低限度的练习
ullamco laboris nisi和aliquip ex ea commodo consequat。
在沃鲁帕特·维利特的《雷德亨德瑞特》中，两人或两人或两人
这是我的女儿。


authorBio先生{
背景色：#fff4e8；
填充：15px 50px 30px 50px；
文本对齐：对齐；
边框：5px实心#f7ddc0；
}
authorBio.h1{
文本对齐：对齐；
颜色：#ad4b34；
}
作者：img{
宽度：50%；
-webkit边界半径：100%；
-moz边界半径：100%；
边界半径：100%；
}
.特色邮政{
背景色：#fff4e8；
填充：15px 50px 30px 50px；
文本对齐：对齐；
边框：5px实心#f7ddc0；
}
.特点邮政img{
宽度：100%；
填充：0；
保证金：0；
}
.特点邮政编码p{
填充顶部：25px；
}
我建议您只使用
标记中的列类

<div class="widget">
    <div class="row">
      <div class="col-sm-6">
         <img src="Images/AimeeAvatar.jpg" alt="Avatar">
      </div>
      <div class="col-sm-6">
         <h1 class="col-sm-6">Aimée LeVally</h1>
      </div>

    </div>
    <hr>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna
      aliqua. Ut enim ad minim veniam, quis nostrud exercitation
      ullamco laboris nisi ut aliquip ex ea commodo consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit
      esse cillum dolore eu fugiat nulla pariatur.
    </p>
  </div><!-- widget -->


莱瓦利酒店



Lorem ipsum dolor sit amet，奉献精英，
劳工和大型企业的临时投资
阿利夸。我们需要一个最低限度的练习
ullamco laboris nisi和aliquip ex ea commodo consequat。
在沃鲁帕特·维利特的《雷德亨德瑞特》中，两人或两人或两人
这是我的女儿。
您需要在列中创建div，如：

<div class="col-sm-8">
  <div class='extra_div_1'>
      <div class="featuredPost">
        <h2>Featured Post <hr></h2>
        <img src="Images/placeholderImg.jpg" alt="Featured Image">
        <p>
          <a>Portland</a>
        </p>
      </div>
  </div>
</div>

<aside class="authorBio col-sm-4">
  <div class='extra_div_2'>
      <div class="widget">
        <div class="row">
          <img class="col-sm-6" src="Images/AimeeAvatar.jpg" alt="Avatar">
          <h1 class="col-sm-6">Aimée LeVally</h1>
        </div>
        <hr>
        <p>
          Lorem
        </p>
      </div>
  </div>

</aside>
为什么。。。因为当你用边距表示列宽时，它比col-md-12更大，你的列在底部跳跃。因此，您需要在列中创建额外的div，并使用padding/margin在列之间留出空格。

问题在于您直接将
背景色应用于引导网格
.col-*-*
类。这些类使用
填充
来创建每个元素之间的间距，但是
背景
会使它看起来好像每个网格元素都在紧靠着另一个网格元素

相反，将您的背景设置为包装类-例如：


<div class="col-sm-8">
  <div class="my-well">
    <p>Hi I am some text</p>
  </div>
</div>



引导网格始终遵循以下规则：


.col-*
必须包装在
.row
中，并且只有
.col-*
应该是

行的直接子行



此外，COL应该是
div
，而不是像
img
和
h1
这样的其他内联元素。由于填充用于创建列之间的“边沟”或间距，因此在列的内部内容周围使用边距来增加间距。因此，您的
authorBio
和
featuredPost
应该包含在引导列中


<div class="container">
    <div class="row">
        <div class="col-sm-8">
            <div class="featuredPost">
                ..
            </div>
        </div>
        <aside class="col-sm-4">
            <div class="row">
                <div class="col-sm-12">
                    <div class="authorBio">
                        <div class="row">
                            <div class="col-lg-6">
                                <img>
                            </div>
                            <div class="col-lg-6">
                                ...
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </aside>
    </div>
    <!-- row -->
</div>




..



.my-well {
  padding: 15px;
  background: #999;
}



<div class="container">
    <div class="row">
        <div class="col-sm-8">
            <div class="featuredPost">
                ..
            </div>
        </div>
        <aside class="col-sm-4">
            <div class="row">
                <div class="col-sm-12">
                    <div class="authorBio">
                        <div class="row">
                            <div class="col-lg-6">
                                <img>
                            </div>
                            <div class="col-lg-6">
                                ...
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </aside>
    </div>
    <!-- row -->
</div>