Twitter bootstrap Boostrap新手希望在大屏幕上并排显示两个面板，在小屏幕上显示一个面板_Twitter Bootstrap

Twitter bootstrap Boostrap新手希望在大屏幕上并排显示两个面板，在小屏幕上显示一个面板

twitter-bootstrap

Twitter bootstrap Boostrap新手希望在大屏幕上并排显示两个面板，在小屏幕上显示一个面板,twitter-bootstrap,Twitter Bootstrap,我有一个例子，我有两个面板，每个面板都包含两个下拉列表和相关标签。现在，面板是一个接一个的。如果设备上有足够的空间，我希望两个面板并排放置，以便一个面板显示在另一个面板上，就像现在一样以下是标记： <title>Bootstrap Example</title> <body> <div class="container"> <div class="form-horizontal"> <div class

我有一个例子，我有两个面板，每个面板都包含两个下拉列表和相关标签。现在，面板是一个接一个的。如果设备上有足够的空间，我希望两个面板并排放置，以便一个面板显示在另一个面板上，就像现在一样

以下是标记：

<title>Bootstrap Example</title>

<body>
  <div class="container">
    <div class="form-horizontal">
      <div class="panel-group">
        <div class="panel panel-default">
          <div class="panel-heading">Panel1</div>
          <div class="panel-body">
            <div class="form-group">
              <label class="control-label col-md-2" for="ResidentStateType">State Type1</label>
              <div class="col-md-10">
                <select class="form-control" id="ResidentState" name="ResidentState">
                  <option value=""></option>
                  <option value="S">Subscriber</option>
                  <option value="M">Member</option>
                </select>
                <span class="field-validation-valid text-danger" data-valmsg-for="ResidentStateType" data-valmsg-replace="true"></span>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-md-2" for="ResidentState">State1</label>
              <div class="col-md-10">
                <select class="form-control" id="ResidentState" name="ResidentState">
                  <option value=""></option>
                  <option value="AK">ALASKA</option>
                  <option value="AL">ALABAMA</option>
                  <option value="ETC">ARKANSAS</option>
                </select>
                <span class="field-validation-valid text-danger" data-valmsg-for="ResidentState" data-valmsg-replace="true"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="panel-group">
        <div class="panel panel-default">
          <div class="panel-heading">Situs/Contract State</div>
          <div class="panel-body">
            <div class="form-group">
              <label class="control-label col-md-2" for="SitusContractStateType">State Type2</label>
              <div class="col-md-10">
                <select class="form-control" id="SitusContractStateType" name="SitusContractStateType">
                  <option value=""></option>
                  <option value="R">Resident</option>
                  <option value="C">Client</option>
                </select>
                <span class="field-validation-valid text-danger" data-valmsg-for="SitusContractStateType" data-valmsg-replace="true"></span>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-md-2" for="SitusContractState">State2</label>
              <div class="col-md-10">
                <select class="form-control" id="SitusContractState" name="SitusContractState">
                  <option value=""></option>
                  <option value="AK">ALASKA</option>
                  <option value="AL">ALABAMA</option>
                  <option value="ETC">ARKANSAS</option>
                </select>
                <span class="field-validation-valid text-danger" data-valmsg-for="SitusContractState" data-valmsg-replace="true"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Bootstrap示例
小组1
州类型1
用户
成员
状态1
阿拉斯加州
阿拉巴马州
阿肯色州
地点/合同国
州类型2
居民
客户
状态2
阿拉斯加州
阿拉巴马州
阿肯色州

是一个JSIDLE链接

我该怎么做

我以前从未使用过JSFIDLE，所以我希望这也能奏效…

最简单的方法：将两行

替换为

。当在一定宽度下运行时（取决于引导的配置，默认值为768px），两个面板将一个显示在另一个上面。否则，它们是并排的

官方网站上对网格系统进行了解释。一旦您理解了它，您将能够对元素执行任何您想要的操作，并将它们放置在任何您想要的位置。

最简单的方法：将两行

替换为

。当在一定宽度下运行时（取决于引导的配置，默认值为768px），两个面板将一个显示在另一个上面。否则，它们是并排的

官方网站上对网格系统进行了解释。一旦你理解了它，你就可以对你的元素做任何你想做的事情，并把它们放在你想放的任何地方。

这很管用。为了获得我想要的效果，我需要有多个容器类，每个可能包装的“行”对应一个容器类。例如，请让我知道这是不是一种方法。我不是一个足够好的前端开发人员，无法判断其他人的工作。但我要说的是，如果输出是你想要的，那么不管你如何实现它，它都是好的。这是有效的。为了获得我想要的效果，我需要有多个容器类，每个可能包装的“行”对应一个容器类。例如，请让我知道这是不是一种方法。我不是一个足够好的前端开发人员，无法判断其他人的工作。但我要说的是，如果输出是你想要的，那么不管你是如何实现的，它都是好的。