5 
<div class="row-fluid">

    <div class="span6"> Some content </div>

    <div class="span6"> Some content </div>

</div>

これらの 2 つの列の間のガターの真ん中に垂直線を引きたいと思います。

線は列の全長ではないため、境界線だけを使用することはできません。

レイアウトを span6、span1、span5 に変更し、行に span1 列を使用しようとしましたが、適切なコンテンツのスペースが台無しになります。

何か案は ？

4

3 に答える 3

1

最新のブラウザー (CSS 3 をサポートするブラウザー) が使用されているという前提に立つことができる場合は、box-sizing プロパティ ( http://www.w3schools.com/cssref/css3_pr_box-sizing.asp ) を使用して、デフォルトの Bootstrap をオーバーライドします.span6。

これを @media クエリで囲んで、ブラウザーの幅が縮小されたときに左端に奇妙なスペースが表示されないようにすることもできます。

@media (min-width:979px) {
  .span6:not(:first-child) {
    border-left: 1px solid #ddd;
    padding-left: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
}

Bootply

于 2013-07-10T16:17:59.073 に答える
1

答えてくれてありがとう。しかし、問題は国境だけではありませんでした。垂直線は、列の長さの一部のみにする必要があります。

私の解決策は、垂直線の div に絶対配置を使用することでした。スパン列に位置を指定する必要がありました。

<div class="row-fluid">

    <div class="span6"> Some content </div>

    <div class="span6" style="position:relative"> 
        <div class="thin_vertical_line" style="position:absolute;left:-15px;height:70%;top:0px;></div>
        Some content 
    </div>

</div>

残っている唯一の問題は、左の -15px が特定の寸法のガター幅 (Twitter ブートストラップはガターを取得するために 2 番目のスパンに左マージンを設定する) を想定していることと、応答 twitter ブートストラップを使用すると、画面の解像度に応じてこれが変化する可能性があることです。-15px は安全ですが、小さなデバイスの中心にはなりません。

于 2013-07-11T09:25:35.407 に答える