特定の行だけグリッドの幅を調整したい

Question

Bootstrapのグリッドシステムではそれぞれ行を12分割して管理しますが、例えば、特定の行だけを微調整したい場合はどのようにすればよいのでしょうか。

<section>
  <div class="container">
    <div class="row">
      <div class="col-lg-10 col-lg-offset-1">
        <div class="col-lg-2">項目名1</div>
        <div class="col-lg-10">内容1</div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-10 col-lg-offset-1">
        <div class="col-lg-2">項目名1</div>
        <div class="col-lg-10">内容1</div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-10 col-lg-offset-1">
        <div class="col-lg-2">項目名2</div>
        <div class="col-lg-10">内容2</div>
      </div>
    </div>
  </div>
</section>

このようにすると、項目名が短い場合、内容との間に無駄なスペースができてしまいます。
かと言って、ネガティブなマージンなどで指定するとスマホなどで見た場合の表示が崩れてしまいます。

項目名がそもそも2文字や3文字といった明らかに少ない字数でグリッドの分割された横幅ですと適当な幅とならないような場合で、且つ、他の箇所への影響（グリッドの設定自体を弄らない／他の要素は現状の設定で問題がない為）を及ぼさないような変更はどのようにすればよいのでしょうか？

Comments

[kei344]

どのように表示されることが問題で、どのように表示したいのか、というものを画像や説明で補足していただけないでしょうか。

[Auxo]

ご指摘の通りです。今回具体的なサンプルを準備しようとしている最中に独自のクラスで対応する方が早いのでは･･･と考え、その方法で解決してしまいました。そのまま放置しまして大変失礼いたしました。

Answer 1

どういったことを表現されたいのかわからないので簡単な答えになりますが...
項目、内容というかんじで表記したいなら、グリッドシステムではなくてテーブルクラスを使った方がいいのでは？
bootstrapのテーブルはレスポンシブなものが用意されているので便利です。

また、要素によって変わってしまうboxのサイズを合わせたいときは私はmin-withを使ってます。

Comments

[Auxo]

ご回答ありがとうございます。

私の方では結局今回は別途クラスを準備し個別に対応する事として解決いたしました。
※サンプルの提示が必要だと思い作成していた際に、その方が早いのでは･･･と思い着手し解決

汎用的な方法としてはご提案頂いた方法の方が良いように感じますので、今後同様の事案があったときは活用させていただきます。