同一行上的项目，bootstrap

时间：2015-08-31 13:28:03

标签： css twitter-bootstrap

我正在使用bootstrap。我有四个项目。但最后一项显示在其他三项下，它必须在同一行。我有这个：

<div class="text-center linksblok">
    <p><strong>Zoekt u specifieke informatie over een behandeling of uw ziekenhuis?</strong></p>

    <div class="container">
    <div class="row">
<div class="col-xs-12 col-ms-12 col-sm-offset-1">


        <div class="linkblok hidden-xs col-md-3 col-sm-4">
          <a href="http://www.sfg.nl">Bekijk de site van &gt;</a>
        </div>


        <div class="img-responsive col-md-3 col-sm-4">
          <a href="http://www.sfg.nl"><img src="{channel.link('/designs/SFVG/SFG logo.png')}"  alt="logo sfg"/></a>
        </div>

        <div class="linkblok hidden-xs col-md-3 col-sm-4">
          <a href="http://www.sfg.nl">Bekijk de site van &gt;</a>
        </div> 

        <div class="img-responsive col-md-3 col-sm-4">
          <a href="https://www.vlietlandziekenhuis.nl/"><img src="{channel.link('/designs/SFVG/Vlietland logo.png')}" alt="logo vlietland"/></a>
        </div>
</div>
</div>
</div>
</div>

现在看起来像这样（见截图）。但是最后一个徽标项必须与其他3个项目在同一行。

谢谢 enter image description here

这是css：

/*!
 *  Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url('/fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('/fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('/fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('/fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
}
/* algemeen */
body {
 background-image:url("/designs/SFVG/red dots grid.png");
 font-family: 'Montserrat',Verdana, sans-serif;
 color:#054479;
}
a,a:hover,a:visited,a:active {
    color:#67b045;
}
/* Social media */
.fa-twitter:before {
  content: "\f099";
}
.fa-facebook-official:before {
  content: "\f230";
}
.fa-youtube:before {
  content: "\f167";
}
.fa-linkedin:before {
  content: "\f0e1";
}
.fa-envelope:before {
  content: "\f0e0";
}
.icon-search:before {
    content: "\f002";
}
.icon-start:before {
    content:"\f144";
}
.icon-book:before {
    content:"\f02d";
}
.icon-accordion:before {
    content:"\f067";
}
.active .icon-accordion:before {
    content:"\f068";
}


/* end social media*/

/*headerrow*/
.headerrow {
    background-color:#ffffff;
    color:#054479;
}
.headerrow .socialmedia,
.footerrow .socialmedia{
    background-color:#e3001b;
    color:#FFFFFF;
    text-align: right;
    padding: 10px 10px 3px 3px;
    height: 40px;
    font-size:1.2em;

}
.headerrow .socialmedia a,
.footerrow .socialmedia a{
    color:#ffffff;
    padding:3px;
    border-left:1px solid #ffffff;
}
.headerrow .socialmedia a:last-child,
.footerrow .socialmedia a:last-child  {
    border-right: 1px solid #ffffff;
}
.contentblok .socialmedia{
    background-color:#ffffff;
    color:#e3001b;
    text-align: center;
    font-size:1.2em;
    padding: 10px 10px 3px 3px;
}
.contentblok .socialmedia a{
    color:#e3001b;
    border:solid 1px #e3001b;
    margin:0;
    padding:0 5px;
    display:inline-block;
}
.headerrow .form-control{
    border:0 solid #ffffff;
    box-shadow:none;
    -webkit-box-shadow:none;
    border-bottom:1px solid #054479;
    border-radius:0;
}
.headerrow .btn-default{
    color: inherit;
    background-color: #ffffff;
    border-color: transparent;

}
.logobox{
    padding:10px 0;
    vertical-align:middle;
}
/*end headerrow*/
/*navigationbar*/
.navbar-default {
    background-color:#ffffff;
    border-color:#e3001b;
    border-radius:0;
    border-width:2px 0;
    font-weight:700;
    font-size:1.2em;

}
.navbar-default .navbar-nav > li > a {
    color:#054479;
}
.navbar-default .navbar-nav > li > a:active,
.navbar-default .navbar-nav > li.active > a {
    color:#e3001b;
    background-color:#ffffff;
}
.navbar-nav {
    text-align: center;
}
.navbar-collapse.collapse .center {
    display:table;
    margin:0 auto;
}
/*footer*/
.footer .background  {
    background-image:url("/designs/SFVG/bg_footer.png");
    background-repeat:no-repeat;
    height: 255px;
}
.footerlogo{
    padding:60px 10px 10px 10px;
}
.cert img {
    margin:20px 40px 40px 0;
}
/*content*/
.pagetitle {
    background-color:#e3001b;
    color:#ffffff;
    Padding:20px;
    margin-top:40px;
    margin-right: -1px;
    border:1px solid #e3001b;
}

.contentblok {
    background-color:#ffffff;
    border:1px solid #e3001b;
    padding:20px;
    margin-bottom:40px;
}
.contentblok.list{
    margin-bottom:0;
}
.contentblok .h2:first-child{
    text-align:center;
}
.imageblok {
    background-color:#ffffff;
    border:1px solid #e3001b;
    /* margin-left:-30px; */
    border-width:1px 1px 1px 0;
    /* weergave is nog niet goed, maar misschien acceptabel*/
    display:table-cell;
    padding-right:0;

}
@media (max-width=768px){
.imageblok{
    padding-left:0;
}
}
.innerblok {
    padding:0 15px;
}
.imageblok .innerblok {
    padding:0;
}
.intro {
    color:#e3001b;
    text-align:center;
}

.linksblok div {
    margin:20px;
    display:inline-block;   
}



.linkblok {
    background-color:#68b022;
    padding:20px;
    color:#ffffff;
    border:1px solid #68b022;
    margin:-1px;
}
.linkblok.active {
    background-color:#3d6f1c;
}
.linkblok a,.linkblok a:active,.linkblok a:visited {
    color:#ffffff;
}
.onderblok {
    background-color:#ffffff;
    border:1px solid #e3001b;
    border-width:0 0 1px 1px;
margin-bottom: 40px;
margin-left:1px;
}

.losblok {
    background-color:#ffffff;
    border:1px solid #e3001b;
    border-width:1px 0 1px 1px;
    margin-bottom: 40px;
}

.onder {
    margin-bottom: 40px;

}
.locatieblok {
    height:262px;
}
.date {
    margin-bottom:1em;
    color:#67b045;
    font-style:italic;
    display:block;
}
.linkblok.nieuwsbrief {
    Padding:20px;
    margin:40px -1px -1px -1px;
}
@media (max-width: 992px){
.linkblok.nieuwsbrief {
    margin:40px -1px;
}
}
.flex-row .contentblok {
    min-height:281px;
}
/*feature*/
.feature {
    background-image: url("/designs/SFVG/bg feature.png");
    min-height:240px;
    color:#ffffff;
    font-size:1.8em;
    padding:50px 0 20px;
    margin:20px 0;
}
.feature a {
    color:#ffffff;
}

.feature-text p {
    width:100%;
    text-align:left;
    font-weight:200;
}
.feature-link {
    /* position:absolute; */
    text-align:center;
    width:100%;
}
p.pad-l-05 {
    padding-left:5%;
}
p.pad-l-10{
    padding-left:10%;
}
p.pad-l-15 {
    padding-left:15%;
}
p.pad-l-20{
    padding-left:20%;
}
p.pad-l-25 {
    padding-left:25%;
}

/* spreuken */
.spreuk {
    background-image: url("/designs/SFVG/bg 1.png");
    min-height:240px;
    color:#ffffff;
    font-size:1.8em;
    padding:50px 0 20px;
    margin:20px 0;
}
.spreuk p {
    width:100%;
    text-align:right;
    font-weight:200;
}

.spreuk em, .feature em {
    font-family: 'Droid Serif', serif;
    font-style:normal;
    font-weight:500;
    font-size:1.1em;
}
p.pad-r-05 {
    padding-right:5%;
}
p.pad-r-10{
    padding-right:10%;
}
p.pad-r-15 {
    padding-right:15%;
}
p.pad-r-20{
    padding-right:20%;
}
p.pad-r-25 {
    padding-right:25%;
}
/* locaties */
.locatie {
    height: 80px;
    margin:0 0 30px 0;
}
.locatie img {
    max-height:80px;
}
.locatie.h3 {
    padding-top:20px;
}

@media (min-width: 992px){
.row .mid {
    padding:0;
    margin-right:-1px;
}
.row .first {
    padding-right:0;
    margin:0 -1px;
}
.row .last {
    padding-left:0;
}
}
/*Faq portal  */
.accordion {
    padding:0;
}
.accordion .icon-accordion {
    color:#67b045;
}
.accordion-item .content {
    max-height:1px;
    overflow:hidden;
}
.active.accordion-item .content{
    max-height:none;
}

/*Nieuwsarchief*/
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 2;
  color: #ffffff;
  background-color: #68b022;
  border-color: #68b022;
  cursor: default;
}

.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  line-height: 1.42857143;
  text-decoration: none;
  color: #68b022;
  background-color: #ffffff;
  border: 1px solid #e3001b;
  margin-left: -1px;
}
.news-img {
    margin-bottom:20px;
}

问题是如果我这样做：

.linksblok div {
    display:inline-block;   

}

它看起来像这样：

enter image description here

2 个答案:

答案 0 :(得分：0)

你的元素有额外的余量：

.linksblok div {
  margin: 20px;
  display: inline-block;
}

您应该删除它或将其更改为填充，例如

@vivekkupadhyay：网格是正确的，它有12而不是16。

答案 1 :(得分：0)

我刚刚运行了您的代码，并且能够在您添加.linksblok div <{p>的margin: 20px;上找到该代码

我重新运行你的代码而没有这个余量，它运行正常。 这样做： 

.linksblok div {
display:inline-block;   
}

每个引导程序（here），您可以看到应该如何设置。你也使用16而你只需要使用12.你得到16的原因是因为你有四个div，所有col-md-4都加上16。

相关问题
最新问题