Question

我正在使用boostrap 2.3，我尝试将选择控件与其后的引导按钮水平对齐。

<div class="row-fluid">
    <div class="span3">
        a
    </div>
    <div class="span3">
        b
    </div>
    <div class="span6">
        <a href="#" class="btn btn-primary">...</a>
        <select class="selectized input-large">
            <option>...</option>
        </select>
        <button class="btn btn-primary">...</button>
    </div>
</div>

关注this issue，我试图以这种方式更改样式（内联和负上边距）：

.selectize-control { display: inline-block; margin-top: -60px; }

更好（内联），但不完全对齐（请参阅fiddle）：

Answer 1

我将选择性库和垂直对齐中间添加到.selectize-control

$(function() {
  $('#contract').selectize();
});

.selectize-control {
  display: inline-block;
  vertical-align: middle;
}

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span1">XXX</div>
    <div class="span1">XXX</div>
    <div class="span10">XXX</div>
  </div>
  <div class="row-fluid">
    <div class="span1">a</div>
    <div class="span1">b</div>
    <div class="span10"> <a href="#" class="btn btn-primary">button 1</a>

      <select id="contract" class="selectized input-large">
        <option value="1">a</option>
        <option value="2">b</option>
      </select>
      <button id="cmdContractCopy" class="btn btn-primary">button 2</button>
    </div>
  </div>
  <div class="row-fluid">
    <div class="span1">YYY</div>
    <div class="span1">YYY</div>
    <div class="span10">YYY</div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.bootstrap2.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.min.js"></script>

Answer 2

您可以查看以下链接。

Fiddle

    import UIKit


class ViewController: UIViewController, UIPageViewControllerDataSource {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.


    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.

    }

    var myViewControllers = Array(count: 4, repeatedValue:UIViewController())

    override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject!) {

        let pvc = segue.destinationViewController as? UIPageViewController

        pvc?.dataSource = self

        let storyboard = UIStoryboard(name: "Main", bundle: nil);

        var vc0 = storyboard.instantiateViewControllerWithIdentifier("Infoseite")  as! UIViewController
        var vc1 = storyboard.instantiateViewControllerWithIdentifier("Anmeldung2") as! UIViewController
        var vc2 = storyboard.instantiateViewControllerWithIdentifier("Anmeldung3") as! UIViewController
        var vc3 = storyboard.instantiateViewControllerWithIdentifier("Anmeldung4") as! UIViewController


        storyboard.instantiateViewControllerWithIdentifier("Anmeldung4")

        self.myViewControllers = [ vc0, vc1, vc2, vc3]

        pvc?.setViewControllers([myViewControllers[1]], direction:.Forward, animated:false, completion:nil)

    }

    func pageViewController(pageViewController: UIPageViewController, viewControllerAfterViewController viewController: UIViewController) -> UIViewController? {
        var currentIndex =  find(self.myViewControllers, viewController)!+1
        if currentIndex >= self.myViewControllers.count {
            return nil
        }
        return self.myViewControllers[currentIndex]
    }

    func pageViewController(pageViewController: UIPageViewController, viewControllerBeforeViewController viewController: UIViewController) -> UIViewController? {
        var currentIndex =  find(self.myViewControllers, viewController)!-1
        if currentIndex < 0 {
            return nil
        }
        return self.myViewControllers[currentIndex]
    }

如何将选择控件与旁边的boostrap按钮对齐？

2 个答案: