Question

我有以下html代码，并且我使用了bootstrap3。我试图实现的目标是使4个带有klasse文本的按钮成为同一行中的前两个，而在下一行中成为下两个。现在，每个按钮都显示在自己的行中。

应如何更改以下代码？

could not load @org.example/foo@latest status = 401

所有建议解决方案的问题是，当我使用以下drupal主题按钮类时，例如当我在所有按钮中都具有以下内容时，它不会强制按钮位于同一行：使用Bootstrap的自定义按钮样式来执行表单中的操作... https://www.drupal.org/project/showcase_lite

Answer 1

您需要这样的东西

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <a class="btn btn-primary" href="http://site/">klasse 1</a>
    <a class="btn btn-primary" href="http://site">klasse 2</a>
  </div>
  <br>
  <div class="row">
    <a class="btn btn-primary" href="http://site/">klasse 3</a>
    <a class="btn btn-primary" href="http://site/">klasse 4</a>
  </div>
</div>

Answer 2

不确定这是否是您想要实现的目标，请让我知道，否则，我将为您提供更多解决方案：

基本上，我已经从“ p类文本中心”中删除了按钮klasse3和klasse4，并将它们添加到了下面的另一个“ p类文本中心”中。这是一个简单的解决方案，但我认为您可以使用其他解决方案来获得更好的结果

实际按钮

<!DOCTYPE html>
<html class="jelly-page">
<head>
<meta charset="utf-8">

        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
         <link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.17.custom.css" />
	
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	
    <link rel="stylesheet" type="text/css" media="screen" href="css/jquery.css" />      
    <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/encstyle.css" />      
    <link rel="stylesheet" type="text/css" href="css/bootstrap-wysihtml5.css" />  

       
</head>
<body >

	
	<div class="background-image background-image--attachment-scroll" style="background-image: url(http://sitefront.png);">&nbsp;</div>

    <div class="background-image-overlay region--dark-typography region--white-background" style="opacity: 0.0;background-size:contain;">&nbsp;</div>


    <div class="container-fluid region--dark-typography region--white-background">
    <div class="clearfix block block-block-content block-block-content58f3bb9a-975d-4cef-bb21-a0e3d14ec934" id="block-howprofessionalisourstaff">
    <div class="content">
    <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
    <div class="row bottom-spacing-medium">
    <div class="col-md-8 col-md-offset-2 text-center">
    <div class="row bottom-spacing-medium">
    <div class="col-md-8 col-md-offset-2 text-center">
    <div class="bottom-spacing-large">
    <p class="text-center">
		<a class="btn btn-default" href="http://site/">klasse 1</a>
		<a class="btn btn-default" href="http://site">klasse 2</a>
	</p>
		
	 <p class="text-center">
		
		<a class="btn btn-default" href="http://site/">klasse 3</a>
		<a class="btn btn-default" href="http://site/">klasse 4</a></p>	
    </div>
		
		

    <div class="scroll-button smooth-scroll"><a href="#page-start"><span class="sr-only">Content start</span></a></div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
	
</body>
</html>

纯文本

<!DOCTYPE html>
<html class="jelly-page">
<head>
<meta charset="utf-8">

        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
         <link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.17.custom.css" />
	
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	
    <link rel="stylesheet" type="text/css" media="screen" href="css/jquery.css" />      
    <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/encstyle.css" />      
    <link rel="stylesheet" type="text/css" href="css/bootstrap-wysihtml5.css" />  

       
</head>
<body >

	
	<div class="background-image background-image--attachment-scroll" style="background-image: url(http://sitefront.png);">&nbsp;</div>

    <div class="background-image-overlay region--dark-typography region--white-background" style="opacity: 0.0;background-size:contain;">&nbsp;</div>


    <div class="container-fluid region--dark-typography region--white-background">
    <div class="clearfix block block-block-content block-block-content58f3bb9a-975d-4cef-bb21-a0e3d14ec934" id="block-howprofessionalisourstaff">
    <div class="content">
    <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
    <div class="row bottom-spacing-medium">
    <div class="col-md-8 col-md-offset-2 text-center">
    <div class="row bottom-spacing-medium">
    <div class="col-md-8 col-md-offset-2 text-center">
    <div class="bottom-spacing-large">
    <p class="text-center">
		<a class="button" href="http://site/">klasse 1</a>
		<a class="button" href="http://site">klasse 2</a>
	</p>
		
	 <p class="text-center">
		
		<a class="button" href="http://site/">klasse 3</a>
		<a class="button" href="http://site/">klasse 4</a></p>	
    </div>
		
		

    <div class="scroll-button smooth-scroll"><a href="#page-start"><span class="sr-only">Content start</span></a></div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
	
</body>
</html>

引导程序3具有在同一行中对齐的两个按钮

2 个答案: