css - 三列小布局 Bootstrap

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;
}

我在行中添加了“hidden-xs”类，这将在小型设备上隐藏 div 及其中的所有内容。此外，这些列的总和必须为十二。

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

希望这能解决您的问题。