Bootstrapで２つ以上の要素を左詰したい

Question

Bootstrap 3.2とPHPを使ってWEBページを作っています。
初歩的な内容かもしれませんが質問させてください。

■実現したいこと

スマホサイズ（xs）の時は、２行に分けたいです。

あああああ
いいいいい

それ以外（sm以上）の時は、左詰めにしたいです。

あああああいいいいい

■試したこと

<div>にcol-*を２つ指定する方法も試したのですが、そうするとスマホサイズ以外の時に、要素と要素の間に隙間が出来たり改行されてしまいます。 （「あああああ」の部分はプログラム側からデータが渡される為、長さは不定です） ``` <div class="row"> <div class="col-xs-12 col-sm-6">あああああ</div> <div class="col-xs-12 col-sm-6">いいいいい</div> </div>

↓表示結果
あああああ いいいいい

同じ要素を２つ書いてhidden-xs等で表示する・しないを切り替えてもよいのですが、あまりスマートではないように思います。
CSSで幅と余白を書き換えれば出来るかとは思うのですが、それも力技な気がします……
もっと他にシンプルな方法があったら教えて頂けないでしょうか。

Answer 1

span使えばいけると思いますよ。
横並び

Comments

[sakura_hana]

単に横並びにするだけならspanでいいのですが、
spanにcol-*を設定しても希望の状態になりませんでした。
（col-*で設定した長さになってしまい、改行と左詰の切り替えが行えません）
YukitomoNishinoさんの提案した方法で実装しようと思います。

Answer 2

私は、フレームワークが嫌いなので、間違っているかもしれませんが、
ほとんど、Classで指定されたもので構成されているので、影響されなければいいわけですよね。

<div class="row">
  <div id="box">
    <ul>
      <li>あああああ</li>
      <li>いいいいい</li>
    </ul>
  </div>
</div>

と、IDで使用されていない名前を作り、

#box {
  width:100%;
}
#box ul li {
  float:left;
  width:50%;
}

と今回は2つ「以上」とあったので、リストにしましたが、他のものでも
良いかもしれません。
また、flexとかでも良いと思います。

で、xsの時に、

#box ul li {
  float:none;
  width:100%;
}

とすれば良いのではないかと思いますが、いかがでしょうか？

追記：
面倒な場合、現在の構造を変えずに、

.no-padding {
  padding:0;
}

みたいなものを追記して、クラス指定の一番最後に付け足してもいけると思います。
class="col-xs-12 col-sm-6 no-padding"

Comments

[sakura_hana]

やはりBootstrapだけの機能を使うと思うと難しそうですね。
ご回答を参考に、CSSの上書きで対応しようと思います。
ご回答ありがとうございました。