Question

我希望在我的自举网格中有一个可折叠的div。每行将有2-4个按钮。但是，如果按下 Video 1 按钮，下列按钮将在下一行中移位。 div中的扩展文本必须位于两行按钮之间，而不是位于所有按钮的底部。我知道我可以使用一个简单的表（试过这个，它有效）;但它必须是响应并使用数据库。

如何修改引导网格以抑制按钮替换？

＆＃13;

<div class="container">
  <div class="row">
    <div class="col-xs-3">
	  <a href="#video1" class="btn btn-info" data-toggle="collapse">Video 1</a>
	</div>
			
    <div id="video1" class="collapse">
	  <div class="row">
	    <div id="Content1" class="col-xs-6">
		  <p>Video 1 Gelb</p>
		</div>
		<div id="Content2" class="col-xs-6">
          <p>Video 1 Rot</p>
		</div>
	  </div>
	</div>

    <div class="col-xs-3">
	  <a href="#video2" class="btn btn-info" data-toggle="collapse">Video 2</a>
	</div>
    
    <div id="video2" class="collapse">
	  <div class="row">
	    <div id="Content1" class="col-xs-6">
		  <p>Video 2 Gelb</p>
		</div>
		<div id="Content2" class="col-xs-6">
          <p>Video 2 Rot</p>
		</div>
	  </div>
	</div>

＆＃13;

Answer 1

我不确定你到底想要什么。如果你想让它们都在同一行，你必须记住引导网格系统是12跨。还有更多它会将它推到下面（这是导致你当前问题的原因）。

你的意思是＆＃34;在两列按钮之间＆＃34;而不是＆＃34;两排按钮＆＃34;？

我想出了最好的解决方案。一切都停留在同一条线上。

＆＃13;

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">

  </head>

  <body>

   <div class="container">
  <div class="row">
	  <div class="col-xs-6">
	    <div class="col-xs-4">
		  	<a href="#video1" class="btn btn-info" data-toggle="collapse">Video 1</a>
			</div>
			<div id="video1" class="collapse">
	    	<div id="Content1" class="col-xs-4">
		  		<p>Video 1 Gelb</p>
				</div>
				<div id="Content2" class="col-xs-4">
	        <p>Video 1 Rot</p>
				</div>
			</div>
		</div>
		<div class="col-xs-6">
	    <div class="col-xs-4">
		  	<a href="#video2" class="btn btn-info" data-toggle="collapse">Video 2</a>
			</div>
	    <div id="video2" class="collapse">
	    	<div id="Content1" class="col-xs-4">
		  		<p>Video 2 Gelb</p>
				</div>
				<div id="Content2" class="col-xs-4">
	        <p>Video 2 Rot</p>
				</div>
			</div>
		</div>
	</div>
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
  </body>
</html>

＆＃13;

Bootstrap collapse div成一行

1 个答案: