現在、ブートストラップcssを中心にスタイリングされているページがあります（私はブートストラップ3を使用していますが、違いがあれば4にアップグレードする可能性があります）。私はそれが私が望むようにスタイルをとることができません。私はこれが可能でないか、この分野の限られたスキルが原因であるかどうかはわかりません。CSSスタイルの 'テーブル'にブートストラップを追加する

本質的にページには、検索から返されたアイテムのリストが表示されます。リストは、左側に白いテキストのカテゴリを持つ「ブラックボックス」があり、右側にはテキストベースのリンクと通常は説明的なテキストがあるようにリストが構成されています。

私はこれがfiddle にここで見ることができ

display: table; 
    display: table-row; 
    display: table-column;

を使用して、ブートストラップすることなく、私はこれが何をしたいのかの90％を取得するために管理してきたこれは、マージンなどの少し間隔&制御を必要とするが、必需品を持っています私が達成しようとしていることのうち、左側のセルの背景色は、右側のテキストの量とともに拡大します。

結果リストには基本的に2つの「列」があります。左側には、返されるアイテムのタイプを定義する黒い背景のdivがあり、右側にはリンクとリンクに関するテキストが表示されます。

私は今、すべてのブートストラップCSSを失ってしまっています。 'コンテナ'を追加しても 'リスト'が中央にシフトし、行と列のクラスを追加すると、それが完全に停止します。あなたはこのfiddleを見れば

だから、うまくいけば、私が何を意味するかを見ることができます（それは2つの行として表示されるようにあなたが表示ページを拡大する必要があるかもしれません。）

それは少し厄介で、構造は思わ私にはかなり畳み込まれていますが、一般的に大丈夫です。私は何を求められているのですが、左右の列を整列させることで、一貫した整列で表示されるようにします（左は決して2行以上ですが、右は1から6または7までです）。

「表示：テーブル」を使用して最初のフィドルに生じる効果を達成するために、ブートストラップを使用する方法がありますか？要素が

出典

2017-11-23 gringogordo

EDIT：

ここ

達成するためにブートストラップ4を使用する方法ですフィドルと同じこと＃1：

jsFiddle

.row { 
 
    margin-bottom: 5px; 
 
} 
 

 
.header-light { 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
    font-weight: normal; 
 
} 
 

 
#result-container .container { 
 
    padding-top: 0.5em; 
 
    padding-left: 0px; 
 
    padding-right: 0px; 
 
} 
 

 
.title { 
 
    line-height: 1em; 
 
    font-size: 1.8em; 
 
    padding-top: 0px; 
 
    padding-bottom: 0px; 
 
} 
 

 
.flex-wrapper { 
 
    height:100%; 
 
    display:flex; 
 
    justify-content: center; 
 
    flex-direction:column; 
 
} 
 

 
.box { 
 
\t color: white; 
 
    background-color: #333333; 
 
    text-align: center; 
 
    display:flex; 
 
    align-items:center; 
 
    justify-content:center; 
 
    padding: 1.6em 0; 
 
    -webkit-border-radius: 4px !important; 
 
    -moz-border-radius: 4px !important; 
 
    border-radius: 4px !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<body> 
 

 
<div class="container-fluid"> 
 
    <div class="row row-eq-height"> 
 
     <div class="box col-md-2 col-lg-2 col-sm-2 col-xs-2"> 
 
     Sample bit of text   
 
     </div> 
 
     <div class="col-md-10 col-sm-10 col-xs-10 col-lg-10"> 
 
     <div class="flex-wrapper"> 
 
      <a class="header-light title" id="X" href="http://www.bbc.co.uk">Like Text the quick brown fox jumped over the flat cat with the aplomb of a fit ferile dog like animal</a> 
 
      <span class="description">Description text this is lots of very very very interesting text text</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row row-eq-height"> 
 
     <div class="box col-md-2 col-lg-2 col-sm-2"> 
 
     Sample bit of text with 2 rows    
 
     </div> 
 
     <div class="col-md-10 col-sm-10 col-xs-10 col-lg-10"> 
 
     <div class="flex-wrapper"> 
 
      <a class="header-light title" id="X" href="http://www.bbc.co.uk"> this is short!</a> 
 
      <span class="description">Description text</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
</body>

Bootstrap columns documentation

ブートストラップドキュメントに自分自身を取得します。ブートストラップでどのようにカラムが動作するのかを理解し、HTMLについて考える必要があります。

特に、コンテナにはコンテナがあり、行にはコンテナがあります。行はコンテナ内にあり、サブコンテナは行内にある必要があります。

また、あなたが求めていることについてはわかりません。 display: tableを使用する必要がありますか？テーブル形式のクエリ結果のみを表示する必要がある場合は、dataTablesを使用します。可能であれば、より理解しやすく、実装しやすく、必要に応じて垂直方向の整列機能を提供する、リサーチ結果のための簡単なテーブル構造を生成します。さらに、Bootstrapではテーブルがあまりにも醜いわけではありません。

出典

2017-11-25 20:55:11 Marcadia

ありがとうございました。私は今、ウェブサイトをやり直すだろうと思うが、それはおそらく悪いことではない。私はブートストラップのコードを継承しています（そして、自分自身でそれを大部分はやっていません）。なぜ、オリジナルがそんなに畳み込まれているのか分からないので、私は注意を払っていますが、ちょうどオリジナルの開発者の部分で試行錯誤しています。私はdisplay：tableを使っていましたが、別の答えで見つけたので、ブートストラップを追加するまで動作していましたので、サイトをbs 4に変換してから答えを使用します。どうもありがとう。 – gringogordo

Bs 4は使いやすく、今後発生する可能性のある問題について将来的に使用できる多くのオプションがあります。あなたがv4にアップグレードする際に注意しなければならない差異はほとんどありません。ドキュメントを見るのを躊躇しないでください。移行ガイドがあります。とにかく、あなたは大歓迎です。躊躇しないでください。 :) – Marcadia

CSSスタイルの 'テーブル'にブートストラップを追加する

答えて

EDIT：

関連する問題