Question

如何将这些按钮并排放置并居中？

这是长途跋涉的方式我尝试过不同的bootstrap类，但我找不到那些会在引号下对齐它们的类。

＆＃13;

$(document).ready(function() {  
  /*getting random quote on button click*/
  $('#getMessage').on("click", function() {
    $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=&"+new Date().getTime(), function(json) {      
      console.log(json[0].content)
      console.log(json[0].title)
      // var quoteArr = json.contents.quotes[0])
      $("#quote-content").html(json[0].content);
      $("#quote-author").html("--"+json[0].title);
      $(".social-button").toggle();
    });    
  });  
});

＆＃13;

body {
  background-color: #334551;
}

.container {
  padding-top: 50px;
}
.header_text {
    font-family: 'Allura';font-size: 50px;
    color: green;
}

.sub_text {
   font-family: 'Allura';font-size: 30px;
}

#getMessage {
   font-size: 18px;
}

.social-button {
  with: 120px;
  margin: 10px;
  visibility: block;
}

.image {
  width: 160px;
  height: 180px;
  border-radius: 300px;
  border-color: green;
  border-width: 5px;
  border-style: solid;
}

.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.text {
  color: white;
  font-family: 'Verdana';
  font-size: 18px;
}

＆＃13;

<link href='https://fonts.googleapis.com/css?family=Allura' rel='stylesheet'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">  
  <h1 class="col-lg-12 header_text text-primary text-center">Welcome to Daily Quotes!</h1>
  <div class="row col-lg-12 text-centered">
    <img class="image center" src="http://pctechtips.org/quotes/aristoteles.jpg">
  </div> 
  <div class="row">
    <p class="col-lg-12 sub_text text-center text-primary">Press the button for a famous quote!...</p>
  </div>
  <div class="col-md-3 center">      
    <button id="getMessage" class="btn btn-primary">Get quote!</button>
  </div> 
  <br> 
  <div class="col-lg-8 offset-lg-2">
    <div id="quote-content" class="row col-lg-12 text center"></div> 
    <div id="quote-author" class="row col-lg-12 text center"></div> 
  </div>

  <div class="col-xs-6 social-button center">
    <a class="btn btn-info btn-block btn-social btn-twitter">
      <i class="fa fa-twitter"> Twitter</i>
    </a>
    <a class="btn-primary btn btn-block btn-social btn-facebook">
      <i class="fa fa-facebook"> Facebook</i>
    </a>
  </div>    
</div>

＆＃13;

Answer 1

var test = cs.IsValidIdentifier("if") //return false

这只是基本的引导类

行上的

将是<div class="container"> <div class="row"> <div class="col-xs-12 text-center"> -- this is your row with text </div> <div class="row"> <div class="col-xs-6"> -- this is half the next row for button 1 </div> <div class="col-xs-6"> -- this is half the next row for button 2 </div> </div> </div> </div>，它将占据文本的整个屏幕

然后两个按钮的下一行将在另一行中，每个col-xs-12表示每个按钮占据屏幕宽度的50％

如何将这些按钮并排放置

1 个答案: