html - 在中型设备中设置内容 - bootstrap

Question

我正在创建一个包含两行的网格，第一行是侧边栏，另一行(其他两行在他的内部)是主要内容:

<div class="container-fluid">
  <div class="row">

    <div class="col-md-2 col-align-self-center sidebar" style="border-right: 5px solid #b3daff ">
      <ul>
        <li><button style="border:1px solid #9dbbe4;" class="change-button" id="change-order"  onclick="change()"  type="button">Start Moving</button></li>
        <li><button style="border:1px solid #9dbbe4;" class="change-button" onclick="stop()"  type="button">Stop Moving</button></li>
        <li><button style="border:1px solid #9dbbe4;" class="change-button"  onclick="hide()"  type="button">Hide Elements</button></li>
        <li><button style="border:1px solid #9dbbe4;" class="change-button"  onclick="hide()"  type="button">Hide Elements</button></li>
        <li><button style="border:1px solid #9dbbe4;" class="change-button"  onclick="restore()"  type="button">Restore Elements</button></li>
        <li><button style="border:1px solid #9dbbe4;" class="change-button" onclick="zoom()"  type="button">Zoom In</button></li>
        <li><button style="border:1px solid #9dbbe4;" class="change-button" onclick="resize()"  type="button">Zoom Out</button></li>
      </ul>
    </div>


    <div class="col-md-10 main-content">
      <div class="row"> <!--first row -->
        <div class="col-xs-12 col-sm-6 col-md-3">
          <div class="box" style="order:1">
            <img class="meeseks" src="img/meeseks_purple.jpg" />
            <div class="button-box">
              <button style="background-color:#BA69B6;border:4px solid #BA69B6" class="button" type="button">Pick Up My Color!</button>
            </div>
          </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
          <div class="box" style="order:2">
            <img class="meeseks" src="img/meeseks_purple.jpg" />
            <div class="button-box">
              <button style="background-color:#BA69B6;border:4px solid #BA69B6" class="button" type="button">Pick Up My Color!</button>
            </div>
          </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
          <div class="box" style="order:3">
            <img class="meeseks" src="img/meeseks_purple.jpg" />
            <div class="button-box">
              <button style="background-color:#BA69B6;border:4px solid #BA69B6" class="button" type="button">Pick Up My Color!</button>
            </div>
          </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
          <div class="box" style="order:4">
            <img class="meeseks" src="img/meeseks_purple.jpg" />
            <div class="button-box">
              <button style="background-color:#BA69B6;border:4px solid #BA69B6" class="button" type="button">Pick Up My Color!</button>
            </div>
          </div>
        </div>
      </div>



      <div class="row"> <!--second row -->
        <div class="col-md-3">col</div>
        <div class="col-md-3">col</div>
        <div class="col-md-3">col</div>
        <div class="col-md-3">col</div>
      </div>


    </div>
  </div>
</div>

在 xs 设备和 sm 设备上运行良好。但是在 md 设备的某些分辨率(如 1024x768 )中，图像没有正确的间距并溢出它们的包装。我该如何解决？提前致谢

Answer 1

好的，我忘记了溢出属性，现在当我调整页面大小时，图像不会溢出它们的 div 框。效果不是很好，但是好很多。