Question

我试图将一个单选按钮，一个输入和一些文本对齐到我的list-group-items中，它看起来不错@desktop但是@mobile它在另一个之上。

这是我目前的代码

<div class="panel panel-default">
      <div class="panel-body">
        <span style="color: #990000; font-size:17px;"><strong>8,55 €</strong></span> text
         <ul class="list-group">
    <li class="list-group-item"><input name="1" type="radio"> 1 text <strong>8,55 €</strong></li>
    <li class="list-group-item"><input name="2" type="radio"> 3 text <strong>8,55 €</strong></li>
    <li class="list-group-item"><input name="3" type="radio"> 6 text <strong>8,55 €</strong></li>
    <li class="list-group-item">
    <div class="container-fluid">
    <div class="row">
      <div class="col-md-1"><input name="n" type="radio" ></div><div class="col-md-3"><input type="text" name ="text" id="amount" class="form-control" placeholder="12"></div><div class="col-md-8" >text<strong>8,55 €</strong></div>
    </div>
    </div>
    </li>
  </ul>
      </div>
    </div>

我能做些什么来让它在移动设备和dekstop中做出响应和对齐吗？

Answer 1

您可以使用col-xs-*代替col-md-*：fiddle example

<div class="col-xs-1">
    <input name="n" type="radio" >
</div>
<div class="col-xs-3">
    <input type="text" name ="text" id="amount" class="form-control" placeholder="12">
</div>
<div class="col-xs-8" >
    text<strong>8,55 €</strong>
</div>

在bootstrap中对齐list-group-item内的3个元素

1 个答案: