Question

我有一张public class YourBoard extends View {//EXTENDS VIEW this is important because you override methods Drawable editIcon = getResources().getDrawable(R.drawable.icon); Bitmap mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.background); float xPos = 0; float yPos = 0; public YourBoard (Context context) {//HERE THE CONSTRUCTOR YOU CAN INITIALIZE THINGS HERE super (context); } @Override protected void onDraw (Canvas canvas) {//This was your paint(Graphics g) super.onDraw(canvas); canvas.save(); canvas.drawBitmap(mBitmap, 0, 0, null); canvas.translate(xPos, yPos); editIcon.draw(canvas); canvas.restore(); } @Override public boolean onTouchEvent (MotionEvent event) {//THIS WAS YOUR MOUSE LISTENER switch (event.getAction()) { case MotionEvent.ACTION_DOWN : xPos = event.getX(); yPos = event.getY(); invalidate();//NOTICE THE INVALIDATE I MENTIONED break; } return true; } } }的图片和说明。图像向左拉，描述在右侧。

图片有#include<iostream> #include<unistd.h> #include<stdlib.h> #include<pthread.h> #define NUM 6 using namespace std; pthread_mutex_t mutex = PTHREAD_MUTEX_INITIALIZER; pthread_cond_t cond = PTHREAD_COND_INITIALIZER; void *even(void *arg) { int sum = 0; int count = 0; for (int i = 1; count < NUM/2; i++) { if( !(i % 2) ) { count++; sum += i; } } cout << "In Even Thread: " << sum << endl; pthread_mutex_lock(&mutex); *((int*)arg) = sum; pthread_mutex_unlock(&mutex); pthread_cond_signal(&cond); } void *odd(void *arg) { int sum = 0; int count = 0; for (int i = 1; count < NUM/2; i++) { if( i % 2 ) { count++; sum += i; } } cout << "In Odd Thread: " << sum << endl; pthread_cond_wait(&cond, &mutex); *((int*)arg) = *((int*)arg) + sum; } int main() { int mainSum = 0; pthread_t tidO, tidE; pthread_create(&tidO, NULL, odd, (void *)&mainSum); pthread_create(&tidE, NULL, even, (void *)&mainSum); pthread_join(tidO, NULL); pthread_join(tidE, NULL); cout << "Sum of first " << NUM << " Natural Numbers: " << mainSum << endl; return 0; }类，所以当我调整窗口大小时，它适合面板主体。

问题是如何才能与描述达到相同的效果。我想将它垂直对齐面板，当我调整窗口大小时，它也应该适合面板主体。

到目前为止我尝试过：

＆＃13;

panel panel-default

＆＃13;

img-responsive

＆＃13;

我添加了

.container {
  padding-top: 30px;
}

p {
  font-size: 2vw;
}

.panel {
  border-radius: 0;
}

.panel-body {
  padding: 0;
}

.panel-description {
  margin-top 12px;
  padding-left: 3px;
}

.vertical-center {
  display: flex;
  align-items: center;
}

.no-padding {
  padding: 0;
}

.no-padding-right {
  padding-right: 0;
}

到<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col-sm-4 col-lg-4"> <div class="panel panel-default"> <div class="panel-body"> Basic panel example </div> </div> </div> <div class="col-sm-4 col-lg-4"> <div class="panel panel-default"> <div class="panel-body"> <div class="row"> <div class="col-sm-4 col-md-4 no-padding-right"> <div class="panel-image"> <img src="http://via.placeholder.com/150x150" class="img-responsive" alt="img"> </div> </div> <div class="col-sm-8 col-md-8 no-padding"> <div class="panel-description vertical-center"> <p>Name<br>Surname</p> </div> </div> </div> </div> </div> </div> <div class="col-sm-4 col-lg-4"> <div class="panel panel-default"> <div class="panel-body"> Basic panel example </div> </div> </div> </div> </div>，但它无效。

这个问题的最佳解决方案是什么？

https://jsfiddle.net/DTcHh/39282/

Answer 1

我对您的代码进行了一些更改，现在它运行良好。以下是供参考的更新代码

＆＃13;

.container {
  padding-top: 30px;
}

p {
  font-size: 2vw;
}

.panel {
  border-radius: 0;
}

.panel-body {
  padding: 0;
}

.panel-description {
  margin-top 12px;
  padding-left: 3px;
}

.no-padding-right {
  padding-right: 0;
}

.main-class {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
}

＆＃13;

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-lg-4">
      <div class="panel panel-default">
        <div class="panel-body">
          Basic panel example
        </div>
      </div>
    </div>
    <div class="col-sm-4 col-lg-4">
      <div class="panel panel-default">
        <div class="panel-body">
          <div class="row">
            <div class="main-class">
                <div class="col-sm-4 col-md-4 no-padding-right">
                  <div class="panel-image">
                    <img src="http://via.placeholder.com/150x150" class="img-responsive" alt="img">
                  </div>
                </div>
                <div class="col-sm-8 col-md-8 no-padding">
                  <div class="panel-description vertical-center">
                    <p>Name<br>Surname</p>
                  </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4 col-lg-4">
      <div class="panel panel-default">
        <div class="panel-body">
          Basic panel example
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

如何使用bootstrap 3在面板中垂直对齐文本

1 个答案: