Question

<form class="container">
    <div class="row">
       <div class="col-md-1">
         <label for="vol" class="control-label">Analysis Volume</label>
       </div>
       <div class="col-md-3">
         <div id="volume">                                            
          <div class="control">
            <span class="knob"></span>
          </div>
       </div>
      </div>
      <div class="col-md-1">
         <label for="username" class="control-label vol-box">50% usage</label>
      </div>
      </div>
</form>

我一直试图在图像中连续排列这三个项目，但我不确定要应用哪个类，而且在较小的设备中我需要完全禁用该列。

Answer 1

<!-- HTML --->
<div class="module-wrap">
    <form class="container-fluid">
        <div class="row hidden-xs">
            <div class="col-md-3">
                <label for="vol" class="control-label">Analysis Volume</label>
            </div>
            <div class="col-md-6">
                <div id="volume">                                            
                    <div class="control">
                        <span class="knob"></span>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <label for="username" class="control-label vol-box">50% usage</label>
            </div>
        </div>
    </form> 
</div>

/** CSS **/
.module-wrap {
    width: 200px;
    margin: 0 auto;
}

我添加了课程＆＃34; hidden-xs＆＃34;在行中，这将隐藏div和小设备上的所有内容。这些列也必须总计十二个。

您需要将所有内容包装在div中以限制总宽度。

我希望这能解决你的问题。

三列小布局bootstrap

1 个答案: