Bootstrap列搞砸了

我正在使用Bootstrap的網格系統製作響應式橫幅。橫幅分爲3個部分，banner-left，banner-right-top和banner-right-bottom。這是它應該是什麼樣子： Bootstrap列搞砸了

但我似乎得到這個：

在col-sm-4格的空格。誰能幫忙？

此外，這是我的橫幅代碼。

banner { 
 
    margin: 0 !important; 
 
    padding: 0 !important; 
 
} 
 
.col-sm-8, 
 
.col-sm-4 { 
 
    padding: 0px !important; 
 
    margin: 0px !important; 
 
} 
 
.banner, 
 
.row { 
 
    width: 100% !important; 
 
    margin: 0 auto !important; 
 
} 
 
.btn-banner { 
 
    color: #fff; 
 
    background: transparent; 
 
    border: 1px solid #fff; 
 
    padding: 20px 10px !important; 
 
    transition: .5s ease-out; 
 
    -moz-transition: .5s ease-out; 
 
    -webkit-transition: .5s ease-out; 
 
} 
 
.btn-banner:hover { 
 
    color: #fff; 
 
    background: #2c3e50; 
 
    border: 1px solid #fff; 
 
    text-decoration: none; 
 
    transition: .5s ease-in; 
 
    -moz-transition: .5s ease-in; 
 
    -webkit-transition: .5s ease-in; 
 
} 
 
.banner .row .banner-left, 
 
.col-sm-8 { 
 
    background: url(http://www.wgcafe.nl/wp-content/uploads/2015/04/a-vintage-red-background-with-a-crisscross-mesh-pattern-and-grunge-stains-wanlop-sonngam.jpg) no-repeat; 
 
    background-size: cover; 
 
    max-height: 800px; 
 
} 
 
.banner .row .banner-left, 
 
.col-sm-8 .text { 
 
    padding: 127px 5% 127px 10% !important; 
 
} 
 
.banner .row .col-sm-8 .text h2 { 
 
    font-size: 30px; 
 
    color: #fff; 
 
} 
 
.banner .row .col-sm-8 .text p { 
 
    color: #fafbfb; 
 
} 
 
.banner>.banner-right, 
 
.col-sm-4>.banner-right-top { 
 
    background: url(http://xyer.co/wallpaper/19/1/red-blue-free.jpg) no-repeat; 
 
    background-size: cover; 
 
    max-height: 400px !important; 
 
    margin: 0px !important; 
 
    padding: 0px !important 
 
} 
 
.banner>.banner-right, 
 
.col-sm-4>.banner-right-top .text { 
 
    padding: 162px 10% 160px 20% !important; 
 
} 
 
.banner>.banner-right, 
 
.col-sm-4>.banner-right-top .text h3 { 
 
    color: #fff; 
 
} 
 
.banner>.banner-right, 
 
.col-sm-4>.banner-right-bottom { 
 
    background: url(http://art.ngfiles.com/images/189000/189626_nondual_red-and-blue-emissions.jpg) no-repeat; 
 
    background-size: cover; 
 
    max-height: 400px !important; 
 
} 
 
.banner>.banner-right, 
 
.col-sm-4>.banner-right-bottom .text { 
 
    padding: 89px 10% 89px 20% !important; 
 
    color: #fff; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="banner"> 
 
    <div class="row"> 
 
    <div class="banner-left col-sm-8"> 
 
     <div class="text"> 
 
     <h2>WE ARE AN ELECTRICAL &amp MAINTENANCE COMPANY</h2> 
 
     <p>Based in London and Kent regions.</p> 
 
     <br /> 
 
     <br /> 
 
     <a class="btn-banner" href="about">FIND OUT MORE</a> 
 
     </div> 
 
    </div> 
 
    <div class="banner-right col-sm-4"> 
 
     <div class="banner-right-top"> 
 
     <div class="text"> 
 
      <h3>WE ARE A PROFESSIONAL TEAM</h3> 
 
      <br /> 
 
      <br /> 
 
      <a class="btn-banner" href="contact">GET IN TOUCH TODAY</a> 
 
     </div> 
 
     </div> 
 
     <div class="banner-right-bottom"> 
 
     <div class="text"> 
 
      <h4>WE PROVIDE MANY TYPES OF ELECTRICAL INSTALLATION, INCLUDING COMMERCIAL, INDUSTRIAL AND DOMESTIC.</h4> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

的一兩件事，讓這對工作是CSS .. *{margin:0; padding:0;}，但是毀了一切除了橫幅頁面上的其他人。任何其他替代方案來解決這個問題

來源

2015-12-07 Rev Nosky

你在你的CSS相當多的錯誤。然而，最大的問題是你沒有在你的代碼片段中包含背景圖片，從而使你的橫幅白色白色。請更新您的代碼片段或至少將帖子鏈接到評論中的背景圖片，我會爲你做。 –

我已經更新了新的圖像。 –

-1

將「banner-right-top」和「banner-right-bottom」的邊距設置爲0！important;

來源

2015-12-07 20:18:31 Korgrue

沒有工作 –

UPDATE：這是你正在尋找的修復：我試圖清理「爛攤子」

.banner-right-bottom .text h4 { 
 
     max-height: 96px; 
 
     min-height: 96px; 
 
     overflow: visible; 
 
    } 
 
    .banner-left .text { 
 
     min-height: 440px; 
 
     max-height: 440px; 
 
     overflow: visible; 
 
    } 
 

 

 
/* the code above is what I added, the rest is yours */ 
 
    .col-sm-8, 
 
    .col-sm-4 { 
 
     padding: 0px !important; 
 
     margin: 0px !important; 
 
    } 
 
    .banner, 
 
    .row { 
 
     width: 100% !important; 
 
     margin: 0 auto !important; 
 
    } 
 
    .btn-banner { 
 
     color: #fff; 
 
     background: transparent; 
 
     border: 1px solid #fff; 
 
     padding: 20px 10px !important; 
 
     transition: .5s ease-out; 
 
     -moz-transition: .5s ease-out; 
 
     -webkit-transition: .5s ease-out; 
 
    } 
 
    .btn-banner:hover { 
 
     color: #fff; 
 
     background: #2c3e50; 
 
     border: 1px solid #fff; 
 
     text-decoration: none; 
 
     transition: .5s ease-in; 
 
     -moz-transition: .5s ease-in; 
 
     -webkit-transition: .5s ease-in; 
 
    } 
 
    .banner .row .banner-left, 
 
    .col-sm-8 { 
 
     background: url(http://www.wgcafe.nl/wp-content/uploads/2015/04/a-vintage-red-background-with-a-crisscross-mesh-pattern-and-grunge-stains-wanlop-sonngam.jpg) no-repeat; 
 
     background-size: cover; 
 
     max-height: 800px; 
 
    } 
 
    .banner .row .banner-left, 
 
    .col-sm-8 .text { 
 
     padding: 127px 5% 127px 10% !important; 
 
    } 
 
    .banner .row .col-sm-8 .text h2 { 
 
     font-size: 30px; 
 
     color: #fff; 
 
    } 
 
    .banner .row .col-sm-8 .text p { 
 
     color: #fafbfb; 
 
    } 
 
    .banner>.banner-right, 
 
    .col-sm-4>.banner-right-top { 
 
     background: url(http://xyer.co/wallpaper/19/1/red-blue-free.jpg) no-repeat; 
 
     background-size: cover; 
 
     max-height: 400px !important; 
 
     margin: 0px !important; 
 
     padding: 0px !important 
 
    } 
 
    .banner>.banner-right, 
 
    .col-sm-4>.banner-right-top .text { 
 
     padding: 162px 10% 160px 20% !important; 
 
    } 
 
    .banner>.banner-right, 
 
    .col-sm-4>.banner-right-top .text h3 { 
 
     color: #fff; 
 
    } 
 
    .banner>.banner-right, 
 
    .col-sm-4>.banner-right-bottom { 
 
     background: url(http://art.ngfiles.com/images/189000/189626_nondual_red-and-blue-emissions.jpg) no-repeat; 
 
     background-size: cover; 
 
     max-height: 400px !important; 
 
    } 
 
    .banner>.banner-right, 
 
    .col-sm-4>.banner-right-bottom .text { 
 
     padding: 89px 10% 89px 20% !important; 
 
     color: #fff; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="banner"> 
 
    <div class="row"> 
 
    <div class="banner-left col-sm-8"> 
 
     <div class="text"> 
 
     <h2>WE ARE AN ELECTRICAL &amp MAINTENANCE COMPANY</h2> 
 
     <p>Based in London and Kent regions.</p> 
 
     <br /> 
 
     <br /> 
 
     <a class="btn-banner" href="about">FIND OUT MORE</a> 
 
     </div> 
 
    </div> 
 
    <div class="banner-right col-sm-4"> 
 
     <div class="banner-right-top"> 
 
     <div class="text"> 
 
      <h3>WE ARE A PROFESSIONAL TEAM</h3> 
 
      <br /> 
 
      <br /> 
 
      <a class="btn-banner" href="contact">GET IN TOUCH TODAY</a> 
 
     </div> 
 
     </div> 
 
     <div class="banner-right-bottom"> 
 
     <div class="text"> 
 
      <h4>WE PROVIDE MANY TYPES OF ELECTRICAL INSTALLATION, INCLUDING COMMERCIAL, INDUSTRIAL AND DOMESTIC.</h4> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

最初的回答

。我不得不承認，你知道如何爲你的問題找到一個好的標題。

但是，正如我所做的那樣，我意識到，不是幫助你，我只是做你的工作。我不是在教魚怎麼釣魚，而是在爲你釣魚。這不是我來這裏的原因，也不是你爲什麼來到這裏的原因。

我的真誠誠懇的建議是：刪除它並開始新鮮。

一步一個腳印。

首先讓您的3個區域，看他們是否有反應。爲每個添加背景。在每一步之後，調整您的瀏覽器並檢查響應性。

每當某件事情沒有按照你想要的方式展示時，即使你不得不提問20個問題，也可以在這裏問一下。這是你能夠提升的唯一方法。

下面列出了您做錯了事情，這些事情是我最初開始寫的，但忘記添加它。我希望它能幫助你。

banner只會選擇自定義HTML元素：<banner>some content</banner>。你忘了添加的類別點：.banner
你忘了提transition聲明的過渡效果（see w3c - 滾動到CSS語法）
你不應該指定懸停狀態的任何財產，如果不從不同正常狀態。次
99.99％，如果使用的是引導和發現自己正在用您的自定義CSS !important，你做錯了。
不要修改引導程序定位類的填充，浮點或邊距（.row,.col-...。使用Bootstrap的最佳做法不是將佈局類與您自己的混合，只需將您的元素放入.col-...並將CSS應用於該內容，不.col-...，這不是必須的，但它會讓你的生活，從長遠來看要容易得多。
使用最弱的選擇可能的規則。如果.banner .text作品，請不要使用.banner > .banner-left.col-sm-8 .text。
嘗試設置你的CSS規則儘可能通用，而是爲每個孩子指定color:#fff;的，指定它的父。

有更多的話要說，但不是很重要。如果您嘗試根據以上所述編寫CSS，那麼您的代碼將會更清晰並且更容易控制。最重要的是，人們會發現它更容易幫助你。

來源

2015-12-07 21:18:49

我不打算重新開始，我想是怎麼回事，只需要與白色間隔的修正。 –

好的，修訂版更新了我的答案。添加了您可能會發現最有用的部分。 –

這裏的[你的CSS的清理版本（http://jsfiddle.net/websiter/cvsx49wL/），有一些我所提到的適用的原則。 –

我固定它爲你： http://codepen.io/staypuftman/pen/yeyMjo

您使用的容器和內容元素，但試圖以絕對位置含量像素填充。這將在不同尺寸的屏幕上打破。使用百分比如下：

// This is your content, pad element relative to the container 
// I used percentages so, again, this would be relative to the viewport and potentially reusable 
.banner .row .banner-left,.col-sm-8 .text{ 
    padding: 25% 20%; 
}

我用vh（視高度）單位大小的箱子適當的視口。這是做你正在嘗試做的更有效的方式。

// This is your left-hand column container 
// Note how I see 100vh, that just makes it as tall as your viewport 
.banner .row .banner-left,.col-sm-8{ 
    background:url(http://www.wgcafe.nl/wp-content/uploads/2015/04/a-vintage-red-background-with-a-crisscross-mesh-pattern-and-grunge-stains-wanlop-sonngam.jpg) no-repeat; 
    background-size:cover; 
    max-height: 800px; 
    height: 100vh; 
}

來源

2015-12-07 21:27:38 staypuftman

這仍然是壞的。 –

你看過codepen的例子嗎？那有什麼壞處？ – staypuftman

Bootstrap列搞砸了

回答

相關問題