これらの2つの列が他の2つの列の上に積み重なると、十字罫線が表示されます。私はブートストラップを使用しています。列がブートストラップに積み重なったときに二重の罫線が表示される
.border-col {
border:1px dotted grey;
}<div class="row">
<div class="col-xs-6 border-col"></div>
<div class="col-xs-6 border-col"></div>
<div class="col-xs-6 border-col"></div>
<div class="col-xs-6 border-col"></div>
</div>どのように私は二重枠を避けていますか？私は子セレクタを使用しようとしましたが、正確に正しいとは思えません。
ありがとうございました。
.border-col {
border:1px dotted grey;
border-bottom:0;
}
.border-col:last-child {
border:1px dotted grey;
}
使用するすべてのdivのための唯一の境界線があなたのような競合国境を離れて行うことができ、二重枠を避けるために、あなたを助ける最初のdivまたは最後のdiv
.border-col {
border:1px dotted grey;
border-bottom: 0;
}
.border-col:last-child {
border: 1px dotted grey;
}
を期待そう：
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.border-col { border:1px dotted grey; }
.border-col:nth-child(n) {
border-right: none;
}
.border-col:nth-child(-n+2) {
border-bottom: none;
}
</style>
</head>
<body>
<div class="row">
<div class="col-xs-6 border-col">lorem</div>
<div class="col-xs-6 border-col">ipsum</div>
<div class="col-xs-6 border-col">dolor</div>
<div class="col-xs-6 border-col">dang</div>
</div>
</body>前の例では垂直を考慮していませんが、ここではより良い例が1つあります。そのcss3に依存しています。
.border-col {
border: 1px dotted gray;
border-bottom: none
}
.border-col:nth-child(odd) {
border-right: none;
}
.border-col:nth-last-child(2) {
border-bottom: 1px dotted gray;
}
.border-col:last-child {
border: 1px dotted gray;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-6 border-col">text</div>
<div class="col-xs-6 border-col">text</div>
<div class="col-xs-6 border-col">text</div>
<div class="col-xs-6 border-col">text</div>
<div class="col-xs-6 border-col">text</div>
</div>
</div>
グレート、あなたの助けに感謝し、完璧に動作します。境界線がなく、二重の境界線がありません。 – Netrunner21
こんにちは、関連する質問。オリジナルの質問とまったく同じスタイルとHTML。今度は境界をそのまま保ち、それらの間にスペースを入れてください。上/下マージンを適用すると問題ありません。ただし、左右のマージンは2つの列を積み重ねます。 – Netrunner21
何かが最初の解決策を思いついた。それは482 pxまでうまく動作します。 481px以下では、左下のボックスが下がります。デフォルトのBSパッディングを減らすと、これが修正されます（パディング右：15ピクセル、パディング左：15ピクセル）。しかし、パディングがゼロに設定されていても、より低い解像度でも、同じことが再び起こります。パディング以外の修正？私は白い国境に行くことができました - 低解像度で右。これは修正でもあり、バックグラウンドも白ですが、より正確なものはすべて歓迎されます！ – Netrunner21